Redux

前端工程

Action Creator

Action 表示行为的一个对象，通常由两个属性组成，type 表示行为的类型，payload 表示相应的数据。

Action Creator 是一个返回 Action 的函数。

Reducer

Reducer 接受当前 State 和 Action 作为参数，返回一个新的 State。在 Redux 初始化的时候会调用一次 Reducer，此时不传入 State，需要返回一个初始 State。

Redux.combineReducers 方法可以将几个子 Reducer 合并成一个 Reducer，它接受一个对象作为参数，对于 State 中的每一个属性，使用该对象中对应的 Reducer 来进行处理。

Store

Store 通过 Redux.createStore 方法创建，这个方法接受一个 Reducer 作为参数。

store.dispatch 方法将一个 Action 发送到这个 Store。

React Component

React-Redux 中提供了 connect 函数，这个函数的用法如下

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

最终的返回值是一个 Container，这个 Contianer 里面包含着传入的子组件，需要通过这个 Container 给子组件设置 props

设置 props 的方法有两个，mapStateToProps 方法接受 state 和 context 作为参数，mapDispatchToProps 接受 dispatch 和 container 的 props 对象作为参数，两个函数的返回值将作为子组件的 props，通常后者会用于设置事件监听函数。

Middleware

Middleware 位于 Action 和 Store 之间，能够对将要 dispatch 的 action 进行处理。

在 createStore 方法调用时使用 applyMiddleware 方法同时声明所有中间件。

createStore(
  todos,
  applyMiddleware(logger, thunk)
)

Middleware 的写法如下，最后一个中间件的 next 为 store.dispatch，其他的中间件的 next 为下一个中间件

function logger ({ getState, dispatch }) => next => action => {
  return next(action);
}