React Redux 快速入门指南：现代状态管理实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00127/article/details/148361663

React Redux 快速入门指南：现代状态管理实践

react-redux 项目地址: https://gitcode.com/gh_mirrors/rea/react-redux

前言

在当今前端开发中，状态管理是构建复杂React应用的关键环节。React Redux作为最流行的状态管理解决方案之一，通过与Redux Toolkit的深度整合，为开发者提供了高效、可靠的全局状态管理能力。本文将带你快速掌握React Redux的核心使用方法。

基础准备

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

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

环境配置

安装必要依赖

首先需要安装两个核心包：

npm install @reduxjs/toolkit react-redux

@reduxjs/toolkit：Redux官方推荐的工具集，简化了Redux使用
react-redux：连接React和Redux的桥梁

核心概念与实现步骤

1. 创建Redux Store

Store是Redux的核心，存储着整个应用的状态。我们推荐在src/app/store.js中创建：

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {},
})

configureStore不仅创建了store，还自动配置了Redux DevTools扩展，方便开发调试。

2. 将Store接入React应用

在应用入口文件（通常是index.js）中，使用Provider包裹根组件：

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

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

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

3. 创建状态切片（Slice）

状态切片是Redux Toolkit的核心概念，它将相关的状态和逻辑组织在一起。以计数器为例：

import { createSlice } from '@reduxjs/toolkit'

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

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

关键点说明：

createSlice自动生成action creators
使用Immer库，可以直接"修改"状态而保持不可变性
无需手动编写action类型常量

4. 将Reducer添加到Store

import counterReducer from '../features/counter/counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer
  }
})

5. 在组件中使用状态

使用React Redux提供的Hooks连接组件与Redux store：

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>
  )
}