重生之我在chatgpt中学习React 第十一天之React 状态管理进阶-前端-E先生的博客

React 学习指南 - 第十一天 🚀

主题：React 状态管理进阶（Redux Toolkit + Zustand）

今天，我们来深入探讨 Redux Toolkit（RTK） 和 Zustand 这两种状态管理方案。Redux 是 React 最经典的状态管理库，而 Zustand 提供了一种更轻量的替代方案。

1. 为什么需要状态管理？

在小型项目中，组件状态（useState）通常就足够了。但在大型应用中，多个组件可能需要共享数据，例如：

购物车数据
用户认证信息
主题设置

如果直接在 useContext 或 props 传递，会造成状态提升（prop drilling），使代码难以维护。因此，我们需要更好的状态管理方案。

2. Redux Toolkit（RTK）

Redux 传统上比较繁琐，Redux Toolkit（RTK）极大地简化了 Redux 的使用，推荐作为 Redux 的官方最佳实践。

2.1 安装 Redux Toolkit

npm install @reduxjs/toolkit react-redux

2.2 创建 Redux Store

在 store.js 中定义 Redux Store：

import { configureStore, createSlice } from '@reduxjs/toolkit';

// 创建 Slice
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
    addByAmount: (state, action) => { state.value += action.payload }
  }
});

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

// 创建 Store
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});

export default store;

2.3 在 React 组件中使用 Redux

在 index.js 中引入 Provider：

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

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

在 Counter.js 组件中：

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

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

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(addByAmount(5))}>+5</button>
    </div>
  );
}

export default Counter;

✅ RTK 让 Redux 更加简洁，去除了 reducers、actions、dispatch 之间的繁琐操作。

3. Zustand（轻量状态管理）

Redux 虽然强大，但在许多场景下过于复杂。Zustand 是一个更简单的状态管理库，无需 Provider，支持直接在组件中使用全局状态。

3.1 安装 Zustand

npm install zustand

3.2 创建 Zustand Store

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  addByAmount: (num) => set((state) => ({ count: state.count + num })),
}));

export default useStore;

3.3 在 React 组件中使用

import useStore from './store';

function Counter() {
  const { count, increment, decrement, addByAmount } = useStore();

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={() => addByAmount(5)}>+5</button>
    </div>
  );
}

export default Counter;

✅ Zustand 更轻量，不需要 Provider，直接在组件中访问状态。

4. Redux Toolkit vs Zustand 对比

特性	Redux Toolkit (RTK)	Zustand
适用范围	大型应用	中小型应用
API 复杂度	复杂（`slice`、`dispatch`）	简单（直接 `useStore`）
性能优化	内置不可变状态管理	默认使用可变状态，性能更优
中间件支持	内置 Redux DevTools / Thunk	需要手动扩展
代码量	代码多，需额外配置 Store	代码少，即用即取