从零编写 Redux 及其类库

导言

在 React 中，组件通信一直是开发者面临的挑战。起初，Context 作为一种简单的状态管理解决方案，被广泛应用。然而，对于庞大且复杂的应用程序，Context 的局限性逐渐显现。Redux 应运而生，作为一种强大的状态管理工具，它解决了 Context 的许多问题，同时引入了更加严谨和可预测的状态管理机制。

Redux 的核心概念

Redux 围绕几个关键概念构建：

• 单一事实来源： Redux 存储应用程序的整个状态，确保数据的一致性和完整性。
• 不可变状态： Redux 状态是不可变的，这意味着对状态的任何修改都会创建一个新的状态对象。
• 纯函数： Redux 中的 reducer 是纯函数，这意味着它们不会改变输入状态或产生副作用。

从头开始构建 Redux

创建 Store

Redux store 是存储应用程序状态的中央位置。我们可以使用 createStore 函数来创建 store：

import { createStore } from 'redux';

const store = createStore(reducer, initialState);

创建 Reducer

Reducer 是纯函数，它接受当前状态和一个 action 作为参数，并返回一个新的状态：

const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, action.payload] };
    case 'REMOVE_TODO':
      return { ...state, todos: state.todos.filter(todo => todo.id !== action.payload) };
    default:
      return state;
  }
};

派发 Action

Action 是用于触发状态更改的对象。可以使用 dispatch 方法派发 action：

store.dispatch({ type: 'ADD_TODO', payload: 'Learn Redux' });

创建 Redux 类库

除了核心 Redux 之外，我们还可以创建自己的类库来扩展其功能。

创建 Middleware

Middleware 是一种在 Redux 流程中插入中间层的功能。我们可以创建 middleware 来处理异步操作或记录日志：

const middleware = store => next => action => {
  console.log('Dispatching action:', action);
  next(action);
};

创建 Selector

Selector 是纯函数，它从 Redux 状态中提取特定数据。我们可以创建 selector 来获取特定组件所需的数据：

const getTodos = state => state.todos;

总结

通过从头开始编写 Redux 和配套类库，我们对 Redux 的核心概念有了深入的理解。这使我们能够创建可预测、可扩展且可维护的 React 应用程序。通过将自定义类库添加到 Redux 中，我们还可以扩展其功能以满足特定需求。