XmwDocs

主题

第 24 题：聊聊 Redux 和 Vuex 的设计思想 ​

提示

在现代前端开发中，状态管理成为了不可忽视的一部分。Redux 和 Vuex 是两个流行的状态管理库，分别服务于 React 和 Vue 框架。尽管它们有着相似的共同思想，但在实现细节上存在一些显著的区别。本文将深入研究 Redux 和 Vuex 的差异，并突出它们的共同思想。

Vuex 对 Action 和 Reducer 的改进 ​

Vuex 在设计上进行了一些改进，特别是在处理 Action 和 Reducer 函数方面。与 Redux 使用 Action 和 Reducer 的方式不同，Vuex 引入了 mutations 变化函数，摒弃了 Reducer 中繁琐的 switch 语句。在 Vuex 中，通过调用对应的 mutation 函数，无需传递特定的 action 形式，即可直接改变 state 值。

js
// Redux Reducer
const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    // other cases...
    default:
      return state;
  }
};

// Vuex Mutation
const mutations = {
  INCREMENT: (state) => {
    state.count++;
  },
  // other mutations...
};

数据流的顺序 ​

在 Vuex 中，数据的变化流程更为简单，由 View 触发对应的请求，通过调用 store.commit 提交到 Store 中对应的 mutation 函数，最终实现状态的变更。由于 Vue 具有自动重新渲染的特性，无需手动订阅重新渲染函数，只要生成新的 State 即可触发视图的更新。

js
// Vuex Data Flow
// View triggers a request
this.$store.commit("INCREMENT"); // Committing a mutation
// Automatic re-rendering by Vue when data changes

弱化 Dispatch 和 Reducer ​

Vuex 在设计中对 dispatch 和 reducer 进行了一定的弱化。通过 commit 进行 store 状态的一次更变，取消了 action 概念，不再需要传入特定的 action 形式进行指定变更。此外，基于 commit 参数直接对数据进行转变，弱化了 reducer 的角色，使得框架更加简易。

js
// Vuex Commit
this.$store.commit("INCREMENT");
// Directly changing state based on commit parameter

共同思想 ​

  1. 单一的数据源：Redux 和 Vuex 在共同思想上均遵循单一数据源的原则。这意味着应用的整个状态被存储在一个全局对象中，使得状态变化更加可控、可预测。
  2. 变化可以预测：无论是 Redux 还是 Vuex，都致力于使状态的变化可预测。通过严格的状态管理和一定的规范，开发者能够更容易地追踪状态的变化，从而提高代码的可维护性。
  3. 对 MVVM 思想的服务：Redux 和 Vuex 本质上都是对 MVVM（Model-View-ViewModel）思想的服务，旨在将数据从视图中抽离，实现数据与界面的分离，以便更好地维护和测试代码。
  4. Store 作为全局数据中心：两者都将 store 视为全局的数据中心，负责管理应用的状态。通过在全局共享的 store 中进行状态的管理，实现了数据的统一管理和更便捷的状态访问。

总结 ​

在对比了 Redux 和 Vuex 的区别与共同思想后，我们发现尽管它们在具体实现上存在差异，但在整体设计理念上却有许多相似之处。选择使用 Redux 还是 Vuex 取决于你的项目需求和所熟悉的框架。无论如何，理解它们的共同思想对于构建可维护和可扩展的前端应用都是至关重要的。