Redux 到底香不香？手把手教你状态管理与更新！

大家好，我是小杨，一名摸爬滚打了近六年的前端开发者。今天想和大家聊聊 Redux------这个很多人"又爱又恨"的状态管理库。到底为什么要用 Redux？它解决了什么问题？又该怎么正确地修改数据？如果你也有这些疑问，这篇内容应该能帮到你。

一、为什么我们需要 Redux？

在我刚开始接触 React 时，我也曾怀疑："组件自己不是有 state 吗？为啥还要引入 Redux？"直到项目越来越复杂，我才体会到它的价值。

Redux 主要解决了两个问题：

跨组件状态共享：当多个组件需要同一份数据时（比如用户信息、主题设置），通过 props 层层传递非常麻烦，而 Redux 提供了全局的 store，让状态共享变得简单。
状态变更可预测：所有状态变化都通过统一的"动作"发起，容易跟踪和调试，尤其适合中大型项目。

二、Redux 三大核心概念

理解 Redux，先记住这三个词：

Store：状态的"仓库"，全局唯一
Action：描述"发生了什么"的对象
Reducer：一个纯函数，根据 action 更新 state

它们的关系是这样的：
View → 发起 Action → Reducer 处理 → Store 更新 → View 更新

三、怎么修改 Redux 中的数据？

记住一个原则：永远不要直接修改 state！ 必须通过发起 action 来间接更新。

下面我以一个简单的计数器为例，演示完整流程。

步骤1：定义 Action Type

javascript 复制代码

// types.js
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

步骤2：创建 Action 创建函数

javascript 复制代码

// actions.js
import { INCREMENT, DECREMENT } from './types';

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

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

步骤3：编写 Reducer

javascript 复制代码

// reducer.js
import { INCREMENT, DECREMENT } from './types';

const initialState = {
  count: 0
};

function 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;
  }
}

export default counterReducer;

步骤4：创建 Store 并连接 React

javascript 复制代码

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

步骤5：在组件中使用

javascript 复制代码

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

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(decrement())}>-1</button>
    </div>
  );
}

export default Counter;

四、使用 Redux Toolkit 简化开发

现在的 Redux 已经不像以前那么"繁琐"了。官方推出的 Redux Toolkit 大大简化了写法：

javascript 复制代码

// slice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment: state => {
      state.value += 1;
    },
    decrement: state => {
      state.value -= 1;
    }
  }
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Toolkit 允许我们"看似"直接修改 state（底层用了 Immer），代码简洁多了！

五、什么情况下该用 Redux？

根据我的经验，以下情况可以考虑使用 Redux：

项目较大，组件层级深
多个组件需要共享状态
状态更新逻辑复杂
需要强大的调试工具支持

但如果只是个小项目，用 React 自身的状态管理或者 Context API 就足够了。

小结

Redux 的学习曲线确实有点陡，但一旦掌握，它能给项目带来很好的可维护性和扩展性。关键是理解其"单向数据流"和"不可变更新"的思想。

希望这篇内容对你有帮助。如果你有更好的经验或疑问，欢迎在评论区交流！

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！