Redux Toolkit 快速入门指南：React 状态管理新体验-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00108/article/details/148324013

Redux Toolkit 快速入门指南：React 状态管理新体验

redux 项目地址: https://gitcode.com/gh_mirrors/red/redux

前言

在现代前端开发中，状态管理一直是构建复杂应用的关键环节。Redux 作为 React 生态中最流行的状态管理方案，虽然功能强大，但其繁琐的样板代码一直饱受诟病。Redux Toolkit 正是为解决这一问题而生，它提供了一套简化 Redux 开发的工具集，让开发者能够更高效地编写 Redux 代码。

准备工作

在开始之前，请确保您具备以下基础知识：

ES6+ 语法（包括解构赋值、箭头函数等）
React 核心概念（JSX、组件状态、Props、Hooks）
Redux 基础概念（Store、Action、Reducer、Dispatch）

环境搭建

安装必要依赖

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

npm install @reduxjs/toolkit react-redux

这两个包分别提供了：

Redux Toolkit：Redux 开发工具集
React-Redux：连接 React 和 Redux 的桥梁

核心概念与实现

1. 创建 Redux Store

传统 Redux 创建 Store 需要组合多个函数和中间件，而 Redux Toolkit 的 configureStore 方法简化了这一过程：

// app/store.js
import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {}
})

configureStore 自动完成了以下工作：

集成了 Redux DevTools 扩展
添加了默认中间件（包括 redux-thunk）
启用了开发环境检查

2. 将 Store 接入 React 应用

使用 React-Redux 的 Provider 组件将 Store 注入应用：

// index.js
import { Provider } from 'react-redux'
import store from './app/store'

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

Provider 使得所有子组件都能访问到 Redux Store。

3. 创建状态切片（Slice）

Redux Toolkit 的核心创新之一是 createSlice API，它简化了 Reducer 和 Action 的创建：

// features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',  // 切片名称
  initialState: {   // 初始状态
    value: 0
  },
  reducers: {       // 定义 reducer 和对应 action
    increment: state => { state.value += 1 },
    decrement: state => { state.value -= 1 },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

// 导出自动生成的 action creators
export const { increment, decrement, incrementByAmount } = counterSlice.actions

// 导出 reducer
export default counterSlice.reducer

createSlice 的优势：

自动生成 Action 类型和 Action Creator
使用 Immer 库允许"直接修改"状态的写法
减少样板代码量

4. 组合 Reducer

将切片 Reducer 添加到 Store 中：

// app/store.js
import counterReducer from '../features/counter/counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer  // 定义状态树结构
  }
})

5. 在组件中使用状态

使用 React-Redux 的 Hooks 连接组件和 Store：

// features/counter/Counter.js
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './counterSlice'

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

  return (
    <div>
      <button onClick={() => dispatch(increment())}>+</button>
      <span>{count}</span>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  )
}