react 生态圈之 Redux

一、Redux 前端为何需要状态管理库

1. Redux，JS 状态管理框架，Redux 让组件通信更加容易，把 store 放在组件外，所有组件和 store 进行中转

2. Redux 特性，如下所示：

• 单向数据流
• 可预测性，state + action = new state
• 纯函数更新 Store

二、Redux 深入理解 Store、Action 和 Reducer

1. store 可以通过 createStore，传入 reducer 进行创建，包含三个方法，如下所示：

• getState()，获取当前的状态
• dispatch(action)，派发一个 action
• subscribe(listener)，监听 store 的变化

2. (state，action) => new state，如下所示：

• Store
• Actions
• Reducer
• View

3. combineReducers，能够接受多个 reducer 作为参数，最终返回一个封装后的 reducer

4. bindActionCreators，将单个或多个 ActionCreator 转化为 dispatch(action) 的函数集合形式，不用再手动 dispatch(actionCreator(type))，而是可以直接调用方法

三、在 React 中使用 Redux

1. connect 的工作原理，高阶组件

四、Redux 理解异步 Action、Redux 中间件

1. (state，action) => new state，如下所示：

• Store
• Actions
• Reducer
• View
• Middleware

2. Redux 中间件，Middleware，如下所示：

• 截获 action
• 发出 action

3. 异步 action 不是特殊 action，而是多个同步 action 的组合使用

4. 中间件在 dispatcher 中截获 action 做特殊处理

五、Redux 如何组织 Action 和 Reducer

1. 标准形式 Redux Action 的问题，如下所示：

• 所有 Action 放一个文件，会无限扩展
• Action、Reducer 分开，实现业务逻辑时需要来回切换
• 系统中有哪些 Action 不够直观

2. 新的方式，单个 action 和 reducer 放在同一个文件

3. 新的方式，每个文件一个 Action，如下所示：

• 易于开发，不用在 action 和 reducer 文件间来回切换
• 易于维护，每个 action 文件都很小，容易理解
• 易于测试，每个业务逻辑只需对应一个测试文件
• 易于理解，文件名就是 action 名字，文件列表就是 action 列表

六、Redux 理解不可变数据 immutability

1. 不可变数据 immutable data，需要不可变数据，如下所示：

• 性能优化
• 易于调试和跟踪
• 易于推测

2. 如何操作不可变数据，如下所示：

• 原生写法，{...}, Object.assign
• immutability-helper
• immer