React-Redux 入门指南：从零开始掌握状态管理-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00082/article/details/148323910

React-Redux 入门指南：从零开始掌握状态管理

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

什么是 Redux？

Redux 是一个用于 JavaScript 应用程序的可预测状态管理库。它为应用提供集中式的状态存储，使得状态变化变得透明且易于追踪。Redux 主要解决了以下问题：

全局状态共享：在大型应用中，组件间共享状态变得复杂
状态变更的可预测性：所有状态变更都通过明确的 action 触发
调试能力：完整的状态变更历史记录

为什么选择 Redux？

核心优势

单一数据源：整个应用状态存储在一个对象树中
状态只读：只能通过 dispatch action 来改变状态
纯函数修改：使用 reducer 纯函数来描述状态变更

适用场景

Redux 特别适合以下类型的应用：

具有大量交互和状态变化的复杂单页应用
需要维护复杂客户端状态的应用
需要实现时间旅行调试功能的应用

安装 Redux

现代推荐方式：Redux Toolkit

Redux Toolkit (RTK) 是官方推荐的 Redux 开发方式，它简化了大多数 Redux 任务并内置了最佳实践：

# 使用 npm
npm install @reduxjs/toolkit

# 使用 yarn
yarn add @reduxjs/toolkit

传统方式：Redux 核心库

如果只需要核心功能，可以单独安装 Redux：

# 使用 npm
npm install redux

# 使用 yarn
yarn add redux

核心概念快速入门

1. Store (存储)

Store 是整个 Redux 应用的核心，它保存着全局状态：

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({
  reducer: rootReducer
})

2. Action (动作)

Action 是描述状态变化的普通对象：

const addTodoAction = {
  type: 'todos/addTodo',
  payload: 'Buy milk'
}

3. Reducer (归约器)

Reducer 是纯函数，接收当前状态和 action，返回新状态：

function todosReducer(state = [], action) {
  switch (action.type) {
    case 'todos/addTodo':
      return [...state, action.payload]
    default:
      return state
  }
}

现代 Redux 开发模式

使用 createSlice 简化 Reducer

Redux Toolkit 的 createSlice 可以自动生成 action creators 和 action types：

import { createSlice } from '@reduxjs/toolkit'

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

// 自动生成的 action creators
const { increment, decrement, multiply } = counterSlice.actions

// Reducer 函数
const counterReducer = counterSlice.reducer

使用 Immer 简化不可变更新

Redux Toolkit 内置了 Immer 库，允许我们在 reducer 中编写"可变"逻辑，而实际上产生不可变更新：

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      // 看起来像直接修改，实际上是不可变更新
      state.push(action.payload)
    }
  }
})

与 React 集成

使用 React-Redux

React-Redux 是官方提供的 React 绑定库：

import { Provider } from 'react-redux'
import { useSelector, useDispatch } from 'react-redux'

// 在应用顶层提供 store
function App() {
  return (
    <Provider store={store}>
      <MyComponent />
    </Provider>
  )
}

// 在组件中使用状态和动作
function MyComponent() {
  const count = useSelector(state => state.counter)
  const dispatch = useDispatch()
  
  return (
    <button onClick={() => dispatch(increment())}>
      Count: {count}
    </button>
  )
}