前端面试宝典：redux核心知识篇

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。其核心观点如下：

• Web 应用本质：Web 应用是一个状态机，视图与状态是一一对应的关系，所有状态保存在一个对象里。
• 设计思想：

  每个 state 变化可预测。

  动作与状态统一管理。

• 代码量：Redux 代码量大于 MobX。Redux 需要定义一堆的 action、dispatch、reducer；MobX 只需关注 store 和改变的方法。
• 开发难度：Redux 开发难度大于 MobX。MobX 使用面向对象的编程思维，相对简单；Redux 采用函数式编程思维，同时需要借助一系列中间件来处理异步和副作用。
• 调试难度：MobX 调试难度大于 Redux。Redux 状态不可变，返回新状态，使用纯函数，提供时间回溯的开发工具，纯函数及更少的抽象让调试更容易；MobX 状态可变，可直接修改，有更多抽象和封装，调试困难且结果难预测。
• store 数：Redux 是单个 store；MobX 是多个 store。
• 功能性：Redux 功能性大于 MobX。Redux 可回溯状态，实现时间旅行，适合画板应用、表格应用等有撤销、重做操作需求的场景；MobX 直接修改源数据。
• 适用场景：

  MobX：适合简单项目，数据不复杂的应用。

  Redux：适合大型项目，有回溯需求的项目。

• 用户（通过 view）发出 Action，调用 dispatch 方法。
• Store 自动调用 Reducer，传入当前 state 和收到的 Action，Reducer 返回新的 State。
• state 更新后，store 调用监听函数，根据 state 触发重新渲染，更新 view。整个流程数据单向流动，保证流程清晰。

• Store：数据中心，整个应用只能有一个 store。
• State：store 对象包含的所有数据。
• Action：用户触发的行为名称，通过 action 触发 state 的改变，最终响应 view 的改变。
• Action Creator：生成 action 的函数，可生成多种 action。
• Reducer：store 收到 action 后处理 state 的函数，接收 action 和当前 state 两个参数，返回新的 state。
• Dispatch：view 发出 action 的唯一方法。

• 相同点：

  都是状态管理库。

  都从 Flux 中衍生而来，具有单一数据源和单向数据流的特点。

• 不同点：

  适用范围：Redux 是泛用的实现，也可用于 Vue 中，但契合度不如 Vuex。Vuex 中引入 module 可把 store 划分成多个单元。

• redux-logger：日志中间件，输出触发的 action，以及经过 reducer 处理前后的 state 值。
• redux-thunk：处理异步。

  优点：

  体积小：实现方式简单，代码不到 20 行。

  使用简单：没有引入额外范式，上手容易。

  缺点：

  耦合严重：异步操作与 redux 的 action 耦合在一起，不方便管理。

  功能弱：常用功能需自己封装。

• redux-saga：处理异步。

  异步解耦：异步操作转移到单独的 saga.js 中，不掺杂在 action.js 或 component.js 中。

  异常处理：受益于 generator function 的 saga 实现，可通过 try/catch 语法捕获处理代码异常和请求失败。

  功能强大：提供大量 saga 辅助函数和 Effect 创建器供开发者使用。

  灵活：可串行或并行组合多个 saga，形成实用的异步 flow。

  易测试：提供各种 case 的测试方案，包括 mock task、分支覆盖等。

• redux-promise：处理异步。
• redux-observable：

  优点：功能最强，背靠 rxjs 这个强大的响应式编程库，几乎可做任何能想到的异步处理。

  缺点：学习成本奇高，若不会 rxjs，则需额外学习两个复杂的库。

Redux 提供了类似后端 express 中间件的概念，目的是提供第三方插件的模式。

• 中间件的使用（改变数据流）：

  未使用 redux：action -> reducer。

  使用 redux：自定义拦截，变成 action -> middlewares -> reducer。

• 功能：实现异步 action、action 过滤、日志输出、异常报告等功能。
• 使用方法：redux 提供 applyMiddleware 方法，可应用多个中间件。

Redux 中的 connect 方法主要将 UI 组件生成容器组件，即把 UI 组件和 Redux 连接起来。示例代码如下：

Flux 是一种强制单向数据流的架构模式。它控制派生数据，使用具有所有数据权限的中心 store 实现多个组件之间的通信，整个应用中的数据更新只能在此处进行，为应用提供稳定性并减少运行时错误。

• 单一数据来源：整个数据存储在 store 当中，方便调试和检查应用程序。
• 状态只读：改变状态的唯一方法是触发一个动作。
• 使用纯函数更改：纯函数是返回值仅取决于其参数的函数。

Redux 是 flux 思想（单向数据流，store 唯一数据源）的一种实现，并在此基础上做了改进。区别如下：

• Store 数：

  Redux：单个。

  Flux：多个。

• 更新位置不同：文档未详细说明 Redux 和 Flux 更新位置的具体差异内容。

为了解决跨浏览器的兼容性问题，SyntheticEvent 实例会被传递给事件处理函数。SyntheticEvent 是 React 跨浏览器的浏览器原生事件包装器，拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。React 并不将事件附加到子节点本身，而是使用单个事件侦听器侦听顶层的所有事件，这对性能有好处，也意味着 React 在更新 DOM 时不需要跟踪事件监听器。

react-redux 提供两个 API：

• Provider：从最外部封装整个应用，并向 connect 模块传递 store（涉及父子组件）。
• connect：高阶组件，负责连接 react 和 redux。

  包装原组件：将 state、action 通过 props 的方式传入到原组件内部。

  监听 store tree 变化：使包装的原组件可以响应 state 的变化。

  

• 创建 store：定义 state、reducer，使用 Redux 中的 createStore api 创建。
• 封装应用：通过 ReactRedux 中的 Provider 方法把 store 传递给 connect 模块。
• connect：完成连接操作。