React Redux 使用指南：解锁响应式和可维护的 Web 应用程序

2023-12-20 17:25:50

React Redux 概述

在现代 Web 开发中，管理应用程序状态至关重要。React Redux 是一个强大的工具包，它提供了对 React 应用程序状态的集中式管理。Redux 遵循“单向数据流”原则，它确保状态的可预测性和应用程序的可调试性。

Redux 架构

Redux 采用一个基于三个主要组件的简单架构：

Store ：存储应用程序的整个状态。
Actions ：状态更改的事件。
Reducers ：接收动作并更新存储中的状态。

React 与 Redux 的整合

将 Redux 集成到 React 应用程序中非常简单。Redux 提供了 Provider 组件，它将 Store 提供给嵌套的 React 组件。React 组件可以使用 useSelector 和 useDispatch 钩子访问 Store 中的状态和分发动作。

Redux 的实际使用

案例：购物车管理

让我们通过一个购物车管理的示例来展示 Redux 的实际使用。

1. 定义状态

const initialState = {
  items: [],
  total: 0
};

2. 定义操作

const ADD_ITEM = "ADD_ITEM";
const REMOVE_ITEM = "REMOVE_ITEM";

3. 定义 Reducer

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_ITEM:
      return {
        ...state,
        items: [...state.items, action.payload],
        total: state.total + action.payload.price
      };
    case REMOVE_ITEM:
      return {
        ...state,
        items: state.items.filter(item => item.id !== action.payload)
      };
    default:
      return state;
  }
};

4. 在 React 组件中使用 Redux

import { useSelector, useDispatch } from 'react-redux';

const Cart = () => {
  const dispatch = useDispatch();
  const items = useSelector((state) => state.cart.items);

  const addItem = (item) => {
    dispatch({ type: ADD_ITEM, payload: item });
  };

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <button onClick={() => addItem({ id: 1, name: 'Product 1', price: 10 })}>添加</button>
    </div>
  );
};