react-redux & 使用useSelector useDispatch 替代connect

Posted 2020-12-12 gumpyan

 1.redux简介

• redux是react全家桶的一员，它试图为 React 应用提供「可预测化的状态管理」机制。

• Redux是将整个应用状态存储到到一个地方，称为store

• 里面保存一棵状态树(state tree)

• 组件可以派发(dispatch)行为(action)给store,而不是直接通知其它组件

• 其它组件可以通过订阅store中的状态(state)来刷新自己的视图

2.redux核心

2.1 State

state是数据集合

可以理解为工厂加工商品所需的原材料

2.2 action

State的变化，会导致View的变化。但是，用户接触不到 State，只能接触到View 所以，State的变化必须是 View导致的。

action就是改变state的指令，有多少操作state的动作就会有多少action。

可以将action理解为描述发生了什么的指示器

2.3 reducer 加工函数

action发出命令后将state放入reucer加工函数中，返回新的state。 可以理解为加工的机器

2.4 store

store 可以理解为有多个加工机器的总工厂

let store = createStore(reducers);

Store 就是把它们联系到一起的对象。Store 有以下职责：

维持应用的 state；
提供 getState() 方法获取 state；
提供 dispatch(action) 方法更新 state；
通过 subscribe(listener) 注册监听器;
通过 subscribe(listener) 返回的函数注销监听器。

我们可以通过store.getState()来了解工厂中商品的状态， 使用store.dispatch发送action指令。

 

 

 

 

 

 

 

参考：https://juejin.im/post/5af00705f265da0ba60fb844