Wepress

Appearance

使用 redux 有哪些原则？ ​

参考答案： ​

核心描述 ​

  • 单一数据源：整个应用的全局 state 被存储在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。
  • State 是只读的：唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事情的普通对象。
  • 使用纯函数来执行修改：为了描述 action 如何改变 state tree，你需要编写纯的 reducers。

知识拓展 ​

  • 什么时候应该使用 redux：
    • 在应用的大量地方，都存在大量的状态
    • 应用状态会随着时间的推移而频繁更新
    • 更新该状态的逻辑可能很复杂
    • 中型和大型代码量的应用，很多人协同开发
  • reducer 是一个函数，接收当前的 state 和一个 action 对象，必要时决定如何更新状态，并返回新状态。reducer 必须符合以下规则：
    • 仅使用 state 和 action 参数计算新的状态值
    • 禁止直接修改 state。必须通过复制现有的 state 并对复制的值进行更改的方式来做不可变更新
    • 禁止任何异步逻辑、依赖随机值或导致其他副作用代码
  • reducer 遵守上述规则的原因：
    • redux 的目标之一是使代码可预测。当函数的输出仅根据输入参数计算时，更容易理解该代码的工作原理并对其进行测试
    • 如果一个函数依赖于自身之外的变量，或者随机行为，你永远不知道运行它时会发生什么
    • 如果一个函数 mutate 了其他对象，比如它的参数，这可能会意外地改变应用程序的工作方式。这可能是错误的常见来源
  • 不可变更新（Immutability），不能在 Redux 中更改 state 的原因：
    • 会导致bug，例如 UI 未正确更新以显示最新值
    • 更难理解状态更新的原因和方式
    • 编写测试变的困难
    • 打破了正确使用“时间旅行调试”的能力
    • 违背了 Redux 的预期精神和使用模式

题目要点： ​

以下是使用 Redux 的主要原则：

1. 单一数据源 ​

  • 定义：整个应用的状态存储在一个称为 store 的对象中。
  • 优点：单一数据源使得状态管理更为集中和一致，方便调试和维护。所有组件都可以从同一个状态树中读取数据，而无需担心数据的不同来源可能引起的同步问题。

2. 状态是只读的 ​

  • 定义：唯一改变状态的方式是通过 dispatch 一个 action。不能直接修改状态，而是要通过动作和处理程序来描述如何更新状态。
  • 优点：保证状态的不可变性，使得状态的变化可预测且易于调试。通过 actions 和 reducers 来改变状态的过程清晰且可追溯。

3. 纯函数（Reducers） ​

  • 定义：状态更新的逻辑由 reducer 函数定义，这些函数是纯函数。纯函数的定义是：对于相同的输入，总是返回相同的输出，并且没有副作用。
  • 优点：保证了状态更新的确定性和可预测性。每次状态更新都可以通过相同的 action 和 reducer 得到一致的结果，便于测试和调试。

4. 使用 Action Creators ​

  • 定义：使用 action creators 函数来创建 actions。这些函数返回一个 action 对象，而不是直接在组件中编写 action 对象。
  • 优点：使 actions 的创建和管理更为一致和集中。提高了代码的可读性和可维护性，并且方便管理和复用。

5. 中间件（Middleware） ​

  • 定义：使用 middleware 来扩展 Redux 的功能，例如处理异步操作、日志记录、错误报告等。中间件是处理 dispatch 前的功能扩展点。
  • 优点：中间件允许在 dispatch 和 reducer 之间插入额外的逻辑，使得异步操作、日志记录和其他功能的处理更加灵活和可控。

6. 避免在 Reducers 中进行副作用 ​

  • 定义：reducers 不应该有副作用，例如进行 API 请求、修改外部变量等。reducers 只应计算下一个状态并返回它。
  • 优点：确保 reducers 的纯粹性和可预测性。所有副作用应通过 middleware（如 redux-thunk 或 redux-saga）来处理。

7. 结构化状态 ​

  • 定义：设计应用状态的结构时，确保它是平坦的而不是嵌套过深。保持状态的扁平结构可以避免复杂的状态更新逻辑。
  • 优点：平坦的状态结构更易于管理和更新，避免了深层嵌套可能导致的性能问题和更新困难。

8. 连接组件 ​

  • 定义：使用 connect 函数（来自 react-redux）将 React 组件与 Redux store 连接。组件通过 mapStateToProps 和 mapDispatchToProps 函数来接收状态和 dispatch 方法。
  • 优点：将组件与 Redux store 分离，使得组件更具重用性和可测试性。使组件只关心自己的数据和行为，而不需要知道 Redux 的内部实现。