Ketcher源码学习-储备知识-dependencies(1)-Redux

一、核心概念

1. state：一个对象。用来储存需要全局共享的变量的值。

2. action：一个对象。用来清晰地描述在更新state的过程中，究竟发起了哪些操作。

3. reducer：一个纯函数。用来把state和action关联起来。接收旧的state和action，返回新的state。

二、基础概念

1. store：大本营。一个Redux应用只有一个store。

2. getState：store.getState()，用于获取state。

3. dispatch：store.dispatch(action)，用于更新state。

三、进阶概念

1. 异步action：借助redux-thunk或redux-saga等第三方库来实现。

2. middleware：位于【action发起后，到达reducer前】的扩展点。

四、Ketcher中用到的Redux API

1. combineReducers：可以简化生成【主reducer】的样板代码。

2. applyMiddleware：用于引入middleware。

五、react-redux库

1. 将Redux与React关联起来。当Redux状态更新时，通知React更新组件。

2. Provider：一个React组件。将store放入全局的Context中。

3. connect：一个函数。将state和action作为props绑定到React组件上。

(1) 参数一 mapStateToProps：一个函数，接收state和ownProps作为参数。

(2) 参数二 mapDispatchToProps：一个函数，接收dispatch和ownProps作为参数。

(3) mapStateToProps与mapDispatchToProps不能互相访问到对方添加的props。

(4) 参数三 mergeProps：一个函数，接收stateProps、dispatchProps和ownProps作为参数。定义props的合并方式，默认使用Object.assign方法合并。

六、redux-thunk库

1. 提供Redux的异步解决方案。

2. Redux的dispatch仅支持传入【纯对象类型】的action，redux-thunk使dispatch额外支持传入【函数类型】的action，这个函数以dispatch本身作为参数。

七、redux-saga库

1. 提供Redux的异步解决方案。

2. 较redux-thunk相比，有更高的API学习成本，且使用了ES6的Generator函数；但其action的写法更为干净，适合于大型项目。

八、注意事项

1. reducer需为纯函数，不可以在其中：

(1) 修改传入的state和action；

(2) 执行有副作用的操作，如API请求或路由跳转；

(3) 调用非纯函数，如Date.now或Math.random。