Redux：从零开始造个轮子

2023-11-10 07:06:47

作为一名前端工程师，Redux 常常是困扰新手的梦魇。这篇文章将带领你踏上一段手写 Redux 的旅程，通过源码理解其工作原理，从而战胜你的恐惧！

Redux 简介

Redux 是一个用于管理应用程序状态的可预测状态容器，旨在使状态管理变得简单、可控。它通过以下特性实现了这一目标：

单一状态树：Redux 维护一个包含整个应用程序状态的单一对象。
不可变状态：状态树是不可变的，这意味着任何状态修改都会创建一个新的状态对象。
纯函数：Redux 中的 reducer 函数是纯函数，它们不会产生副作用或改变其输入。

手写 Redux 轮子

初始化状态存储

const createStore = (reducer, initialState) => {
  let state = initialState;
  const listeners = [];

  return {
    getState: () => state,
    dispatch: (action) => {
      state = reducer(state, action);
      listeners.forEach((listener) => listener());
    },
    subscribe: (listener) => {
      listeners.push(listener);
      return () => {
        const index = listeners.indexOf(listener);
        listeners.splice(index, 1);
      };
    },
  };
};

创建 Reducer

Reducer 是将动作转换为新状态的纯函数。

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

创建 Actions

Actions 是触发状态更改的纯对象。

const incrementAction = { type: "INCREMENT" };
const decrementAction = { type: "DECREMENT" };

使用 Redux

const store = createStore(reducer, { count: 0 });

store.dispatch(incrementAction);
store.dispatch(decrementAction);

console.log(store.getState()); // { count: 1 }