15 状态管理之集成 Redux

在前面的章节中，我们使用 Context API 进行状态管理，了解了其基本用法与局限性。如今，我们将探索更为强大且灵活的状态管理工具：Redux。Redux 被广泛用于 React 应用中，特别是在需要管理复杂状态的情况下。它帮助我们将状态集中管理，确保应用的可预测性和易调试性。

什么是 Redux？

Redux 是一个用于 JavaScript 应用的状态容器，它以可预测的方式管理应用的状态。Redux 的核心思想是将应用的所有状态存储在一个单一的“存储”中，并通过“操作”（Action）描述状态的变化。

Redux 的基本概念

1. Store（存储）：应用的单一状态树。
2. Action（动作）：用来描述状态变更的普通 JavaScript 对象。
3. Reducer（状态执行器）：纯函数，接收当前状态和动作并返回新的状态。

Redux 的核心原则

• 单一数据源：整个应用只有一个状态树（Store）。
• 状态是只读的：唯一需要改变状态的方法是触发动作（Action）。
• 使用纯函数来进行状态更新：Reducer 必须是纯函数，且不应直接修改传入的参数。

在 React 应用中配置 Redux

接下来，我们将一步一步地将 Redux 集成到我们的 React 应用中。

1. 安装 Redux 相关的依赖

首先，需要安装 Redux 和 React-Redux：

npm install redux react-redux

2. 创建 Redux Store

在项目中创建一个 store.js 文件：

import { createStore } from 'redux';

// 初始状态
const initialState = {
  count: 0,
};

// 定义 reducer
const counterReducer = (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;
  }
};

// 创建 store
const store = createStore(counterReducer);

export default store;

3. 提供 Store

在应用的入口文件（如 index.js 或 App.js）中，将 store 通过 <Provider> 组件提供给整个应用：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

4. 创建 Redux Actions

在项目中创建一个 actions.js 文件，定义需要 dispatch 的 actions：

export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});

5. 使用 Redux State

现在，我们可以在组件中使用 Redux 的状态了。以下是一个简单的计数器组件示例：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>计数器：{count}</h1>
      <button onClick={() => dispatch(increment())}>增加</button>
      <button onClick={() => dispatch(decrement())}>减少</button>
    </div>
  );
};

export default Counter;

6. 组合主组件

在 App.js 中组合我们的计数器组件：

import React from 'react';
import Counter from './Counter';

const App = () => {
  return (
    <div>
      <h1>Redux 状态管理示例</h1>
      <Counter />
    </div>
  );
};

export default App;

7. 运行应用

现在，运行你的 React 应用，你应该能够看到计数器，并能够使用“增加”和“减少”按钮来更新状态。

小结

在本节中，我们：

• 了解了 Redux 的基本原理和重要概念。
• 配置了 Redux 环境，并创建了 store、actions 和 reducer。
• 实现了一个简单的计数器，通过 Redux 管理它的状态。

接下来，我们将深入探讨 React Router，为应用添加路由功能，进一步提升我们的应用结构和用户体验。在即将到来的章节中，您将学习如何通过路由管理来导航不同的组件和页面。