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

2022-10-25 14:17:40 浏览数 (2)

  • vuex 一条重要的原则就是要记住 mutation 必须是同步函数 请看例子
代码语言:javascript复制
mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count  
    })
  }
}

现在想象,我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录,devtools 都需要捕捉到前一状态和后一状态的快照。然而,在上面的例子中 mutation 中的异步函数中的回调让这不可能完成:因为当 mutation 触发的时候,回调函数还没有被调用,devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。 Redux 先从Redux的设计层面来解释为什么Reducer必须是纯函数

如果你经常用React Redux开发,那么就应该了解Redux的设计初衷。Redux的设计参考了Flux的模式,作者希望以此来实现时间旅行,保存应用的历史状态,实现应用状态的可预测。所以整个Redux都是函数式编程的范式,要求reducer是纯函数也是自然而然的事情,使用纯函数才能保证相同的输入得到相同的输入,保证状态的可预测。所以Redux有三大原则:

单一数据源,也就是state state 是只读,Redux并没有暴露出直接修改state的接口,必须通过action来触发修改 使用纯函数来修改state,reducer必须是纯函数

0 人点赞