为什么 Vuex 的 mutation 和 Redux 的 reducer 中不能做异步操作？

Question

Vuex 的 mutation 和 Redux 的 reducer 主要负责更新状态，它们都应该是同步的。原因有几个方面：

1. 纯函数原则

• Redux : reducer 是一个纯函数，它接受当前状态和一个动作，并返回一个新的状态。纯函数的定义包括：
• 对相同的输入总是返回相同的输出。
• 不会有副作用（例如，修改外部状态、执行异步操作）。

  这种设计使得状态的更新可预测且易于调试。如果允许 reducer 做异步操作，状态的更新就会变得不可预测，因为异步操作的完成时间是不确定的。

• Vuex : mutation 类似于 Redux 的 reducer ，也是用于同步地修改状态。 mutation 负责直接更新 Vuex 的状态，并且要求同步执行。这是为了保证状态变更的可追溯性和可调试性。

2. 状态变更的追踪

• Redux 和 Vuex 都支持时间旅行调试。为了实现这一点，状态变更必须是同步的，以便能够正确记录每一个状态的快照。如果状态更新是异步的，那么在调试过程中可能会出现状态不一致的情况，使得追踪和调试变得复杂。

3. 控制流和一致性

• 在状态管理库中，确保状态变更的一致性和可控性是很重要的。异步操作会引入复杂性，使得状态变更的流程变得难以掌控和维护。如果异步操作在 mutation 或 reducer 中直接处理，会导致状态的更新和操作变得不可预测。

4. 专门的异步处理机制

• 为了处理异步操作，Vuex 和 Redux 提供了专门的机制：
• Redux : 使用中间件（如 redux-thunk 或 redux-saga ）来处理异步逻辑。这些中间件可以在触发动作时执行异步操作，然后通过同步的方式更新状态。
• Vuex : 使用 actions 来处理异步操作。 actions 可以执行异步代码，并在异步操作完成后提交 mutation 以更新状态。

总结来说，将异步操作放在 mutation 或 reducer 中会破坏状态管理的同步性和可预测性，因此最好将异步操作与状态更新分开处理，利用专门的机制来处理异步逻辑。