Reactjs - Sử dụng thư viện react-redux

04/01/2022 React

Reactjs - Sử dụng thư viện react-redux

1. <Provider />

Provider là một component của react trong thư viện react-redux. Để cung cấp store cho những component con của nó.

<Provider store={store}>
<TodoApp />
</Provider>,

2. connect()

- Để kết nối component với store. Đọc giá trị từ Redux Store (đọc lại giá trị từ Redux Store, khi Redux Store cập nhật lại). Hàm connect() có hai đối số, cả hai đều là tùy chọn:
+ mapDispatchToProps: Gửi action để cập nhật Store bằng cách: Map method của component bằng Props → dispatch action đến reducer của Store.
+ mapStateToProps: Lấy state từ Store bằng cách: Map state của Store bằng Props → state của Component.

* Các cách phổ biến sử dụng connect()
- C1. không render lại khi Store thay đổi vì ko lấy State từ Store

// Ko lấy state từ Store, Ko gửi action để cập nhật Store
export default connect()(Component)

hoặc

// Ko lấy state từ Store, gửi action để cập nhật Store
import { addTodo } from './actionCreators'
export default connect(
null,
{ addTodo }
)(Component)

- C2. Render lại khi Store thay đổi vì lấy State từ Store

//Lấy state từ Store, Ko gửi action để cập nhật Store
const mapStateToProps = state => state.partOfState export default connect(mapStateToProps)(Component)

hoặc

//Lấy state từ Store, Gửi action để cập nhật Store
import * as actionCreators from './actionCreators'
// ... Component
const mapStateToProps = state => state.partOfState
export default connect(
mapStateToProps,
actionCreators
)(Component)

3. VD Todolist

* Các component cần thiết: