Redux

Redux 是一个状态管理库，提供了可以预测、可以回溯的状态管理方案。

核心概念

• store 存储数据的仓库
• action : 修改数据的动作描述
• reducer : 修改数据的执行者

三大原则

• 单一数据源
• 状态只读
• 使用纯函数来执行修改

简单例子

import { createStore } from "redux";

// 创建一个 reducer 函数
// 其格式为 (state, action) => state 的纯函数
// 返回结果 state ，变化时返回全新的一份 state
function counterReducer(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
}

// 创建 store 存储数据的仓库
let store = createStore(counterReducer);

// 手动订阅更新，也可以事件绑定到视图层。
store.subscribe(() => console.log(store.getState()));

// 改变内部 state 惟一方法是 dispatch 一个 action。
// action 可以被序列化，用日记记录和储存下来，后期还可以以回放的方式执行
store.dispatch({ type: "INCREMENT" }); // 1
store.dispatch({ type: "INCREMENT" }); // 2
store.dispatch({ type: "DECREMENT" }); // 1

这个简单例子可以看出，redux 就是一个状态管理库，它的核心就是 store、action、reducer。 并通过

• store.subscribe 方法来订阅状态的变化
• store.dispatch 方法来修改状态

参考

• 美团 Redux 从设计到源码