从零实现 Redux：一步步构建自己的状态管理工具

2023-10-19 19:38:15

作为一名经验丰富的技术博客创作专家，我坚信挑战传统观念和从头开始构建事物可以带来深刻的理解和持久的价值。今天，让我们踏上一次非凡的旅程，亲自动手创建一个简易版的 Redux，一个改变 JavaScript 状态管理范式的游戏规则改变者。

了解 Redux

Redux 是一种可预测的状态容器，它为您的应用程序提供了一个集中式且不可变的状态管理解决方案。它遵循单向数据流的原则，确保应用程序的状态始终处于一致和可控的状态。

手写 Redux

我们从动作开始，它是状态改变的。让我们创建一个名为 increment 的动作，它将增加计数器：

const incrementAction = {
  type: 'INCREMENT'
};

接下来，我们定义 reducer，它根据动作对状态进行更新。我们的 reducer 将处理 INCREMENT 动作并增加计数：

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    default:
      return state;
  }
};

最后，我们创建 store，它将保存我们的应用程序状态并提供对该状态的访问：

const store = createStore(counterReducer);

整合示例

现在，让我们将我们的手写 Redux 与 React 应用程序集成，以显示计数器并处理用户交互：

import React, { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(store.getState());

  store.subscribe(() => {
    setCount(store.getState());
  });

  const handleIncrement = () => {
    store.dispatch(incrementAction);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleIncrement}>+</button>
    </div>
  );
};