「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」
久闻 redux 大名，我知道这是一个状态管理的库，可以配合 react 或 vue 使用，但是以前一直没用过 redux，也不知道怎么在 react 用起来，所以借着此次更文的机会，聊聊 redux 相关，加深自己对 redux 的理解。
阅读过的资料
思考
redux 基本原理
redux 提供一个 store，存储适用于整个应用的 state，提供了 dispatch 函数，用于调度 action，action 定义了名字（type 字段）和负载（附加字段），调度 action 会执行reducer 函数，根据 action 的名字执行相应的逻辑，可能用到 action 的负载，返回返回新的 state。
redux 中间件
redux 就是这么一个朴素的东西，为了在 state 改变时可以做出灵活丰富的切面操作，提供了 middleware 机制，可以加入多个用户定义的 middleware 函数，每个 middleware 可以允许给 dispatch 添加额外的职责——在 dispatch 函数执行之前或之后执行额外的操作（副作用），得到一个新的 dispatch 函数，多个 middleware 可以链式组合，最终从 createStore 取出来的 dispatch 是应用了多个 middleware 之后的魔改 dispatch，通过 applyMiddleware机制可以给 state 改变的时机附加比如打印日志，热重载更新状态，通知 devtool 工具，执行异步操作等功能，对于常用的操作，@reduxjs/toolkit 封装了默认的 middleware，除此之外，@reduxjs/toolkit 还封装一些configureStore、createSlice 等方法，让 redux 使用更简单。
reducer函数是纯函数，原则上不应该出现副作用，更不会有异步操作，但显然业务上不可避免有请求数据等的异步操作，进行这些操作的理想方法就是放到 dispatch 函数之前或之后执行，封装成 middleware 应用在 store 上显然是合适的，react-thunk正是用来做这个东西的。 react-thunk 也是一个中间件，thunk 指的是可以执行异步操作、dispatch 和读取 state 的一个函数，应用此中间件后，如果 dispatch 传入的是一个 thunk，则执行 thunk，一般我们在 thunk 中的异步操完成后中调用thunk入参 的 dispatch 来执行state 的更新。
与 react 结合
react-redux 提供了一些方法与 react 结合，首先是在 react 根组件包裹 Provider，传入 store，让所有组件都可以消费该 store，然后通过对于需要用到 store 其中的 state 的组件，用 connect 函数进行加工，传入 mapStateToProps 和 mapDispatchToProps，加工后的组件可以直接通过 props 访问 store 中的状态和执行 dispatch，state 的更新就像 prop 的更新一样能触发该组件的重新渲染
redux 设计优点
redux 定义了 state、action、reducer，令状态的变化是可预测的，带来调试上的便利，reducer 的设计也使得状态更容易管理。中间件的设计使得 redux 更容易被扩展，Vue.use 的插件机制和 Koa 的洋葱圈模型都是一种“中间件模式“，我们在做一些库的开发时，也可以活用“中间件模式”，可以大大提高组件的可用性。
