Redux 是一个用于 JavaScript 应用的状态管理库，常与 React 配合使用。它通过单一状态树、纯函数和不可变数据等理念，帮助开发者更高效地管理应用状态。

核心概念 📌

  1. Store
    • 应用状态的容器，通过 createStore 创建
    • 示例代码： 
      const store = createStore(reducer);
  2. Action
    • 描述状态变化的事件对象，格式为 { type: 'ACTION_TYPE', payload: ... }
    • 📌 举个栗子：点击按钮时触发 ADD_TODO
  3. Reducer
    • 根据 action 类型返回新状态的纯函数
    • 📌 用 switch-case 处理不同 action 类型

使用步骤 📝

  1. 安装 Redux 
    npm install redux
  2. 创建 Redux 模块
    • 状态结构设计
    • Action 创建函数
    • Reducer 函数编写
  3. 集成到 React 应用
    • 使用 Provider 包裹根组件
    • 通过 useSelector 和 useDispatch 访问状态

示例代码片段 📚

// action.js
export const addTodo = (text) => ({ type: 'ADD_TODO', payload: text });

// reducer.js
const todoReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    default:
      return state;
  }
};

// store.js
import { createStore } from 'redux';
import todoReducer from './todoReducer';
const store = createStore(todoReducer);

常见问题解答 ❓

  • Q: Redux 和 React 的关系？
    A: Redux 是独立库，但通常与 React 深度集成，用于管理组件间共享状态
  • Q: 为什么需要 Redux？
    A: 随着应用复杂度增加，单一状态树能避免组件间状态传递的混乱

扩展阅读 🔗

想要深入了解 Redux 高级用法？点击这里前往 Redux 进阶教程

Redux_Logo