React Redux 笔记

区别

React Redux 和 Redux 的区别就是,前者需要分开 UI 和逻辑。

UI 和逻辑分开的范例

UI

逻辑

步骤

创建 store

并把 store 放在顶层

React Redux 的 store、reducer 和 UI 绑定

如果不需要对 state 进行加工,React 直接加载,那么 mapStateToProps 设置为空

如果逻辑比较简单,可以直接 dispatch 数据,那么 mapDispatchToProps 设置为空

mapStateToProps、mapDispatchToProps 会把对象传给 UI。React Redux 的 dispatch 也能使用。

细说 store 和 reducer

reducer 负责更新 store 中的 state

dispatch 数据的时候,构造一个 action 对象去分发。reducer 接受后负责处理 store 中的 state 的更新。

细说 mapStateToProps 和 mapDispatchToProps

mapStateToProps 负责把 state 进行处理,让 UI 使用 props 数据。和上面说的一样,如果不需要数据加工,直接读取数据。

mapDispatchToProps 负责逻辑,在 UI 中使用 props 调用函数去 dispatch 数据。和上面说的一样,如果不需要处理逻辑,直接 dispatch 数据。

发表评论

电子邮件地址不会被公开。 必填项已用*标注