Glittering's blog
mamingjuan
2025-09-30
目录

redux介绍

# 一、先给你一个学习全景图

# Redux 的演进脉络（很重要）

  1. Redux（经典）

    • createStore
    • reducer / action
    • middleware（thunk、logger）

  2. React-Redux

    • <Provider />
    • connect

  3. Hooks 时代

    • useSelector
    • useDispatch

  4. Redux Toolkit（RTK，官方推荐）

    • configureStore
    • createSlice
    • createAsyncThunk
    • 内置 immer + thunk

  5. RTK Query（服务端状态）

    • 请求 / 缓存 / 去重 / 失效

👉 现在 90% 的 Redux 项目 = Redux Toolkit + Hooks

# 二、Redux 解决的“本质问题”

一句话版本：

Redux = 可预测的全局状态管理 + 显式的状态变更轨迹

# Redux 解决什么？

  • 跨组件 / 跨层级共享状态
  • 状态变化可追踪（时间旅行、日志）
  • 将 状态变化逻辑 从组件中抽离

# Redux 不适合什么？

  • 表单局部状态
  • UI 临时状态（hover / open）
  • 高频瞬时状态（mousemove）

# 三、Redux 核心思想（先不用写代码）

# 1️⃣ 单一数据源（Single Store）

UI → dispatch(action) → reducer → new state → UI
1

# 2️⃣ 状态是只读的

  • 不能 store.state.xxx = 1
  • 只能通过 dispatch

# 3️⃣ 使用纯函数更新状态

(state, action) => newState
1

这三条 = Redux 的“宪法”

# 四、现代 Redux（RTK）最小心智模型

# Redux Toolkit 帮你做了什么？

  • 自动组合 reducer
  • 自动接入 thunk
  • 自动接入 immer（你可以“写可变代码”）
  • 开箱即用 DevTools

# 你真正要理解的只有 4 个东西

Store
Slice
Dispatch
Selector
1
2
3
4

# 五、从 0 到 1 的最小 RTK 示例（精华）

# 1️⃣ 创建 slice（状态 + reducer + action）

import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment(state) {
      state.value++
    },
    addBy(state, action) {
      state.value += action.payload
    }
  }
})

export const { increment, addBy } = counterSlice.actions
export default counterSlice.reducer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

⚠️ 这里能“直接改 state”是因为 immer

# 2️⃣ 创建 store

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer
  }
})
1
2
3
4
5
6
7
8

# 3️⃣ 注入 React

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

root.render(
  <Provider store={store}>
    <App />
  </Provider>
)
1
2
3
4
5
6
7
8

# 4️⃣ 在组件里用

import { useSelector, useDispatch } from 'react-redux'
import { increment } from './counterSlice'

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

  return (
    <button onClick={() => dispatch(increment())}>
      {value}
    </button>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# 六、Redux 背后的实现原理

# 1️⃣ Store 是什么？

本质上是：

{
  getState,
  dispatch,
  subscribe
}
1
2
3
4
5

# 2️⃣ dispatch 干了什么？

dispatch(action)
  ↓
rootReducer(currentState, action)
  ↓
生成 newState
  ↓
通知所有 subscribers
1
2
3
4
5
6
7

# 3️⃣ React-Redux 是如何“精准更新”的？

  • 每个 useSelector 都是一个 subscriber
  • 使用 引用对比 / equalityFn
  • Fiber render 阶段触发更新（而不是 Redux 主动 render）
  • 👉 Redux 不关心 React 怎么更新
  • 👉 React-Redux 不关心 reducer 怎么算

# 七、异步：为什么用 thunk / createAsyncThunk

# Redux 本身只支持同步

dispatch({ type: 'ADD' })
1

# thunk 让 dispatch 支持函数

dispatch((dispatch, getState) => {
  setTimeout(() => {
    dispatch(addBy(10))
  }, 1000)
})
1
2
3
4
5

# RTK 的标准异步方案

export const fetchUser = createAsyncThunk(
  'user/fetch',
  async (id) => {
    const res = await fetch(`/api/user/${id}`)
    return res.json()
  }
)
1
2
3
4
5
6
7

自动生成：

  • pending
  • fulfilled
  • rejected

# 八、什么时候该用 Redux？

# ✅ 适合

  • 用户信息 / 权限
  • 全局配置
  • 复杂业务状态机
  • 多页面共享状态

# ❌ 不适合

  • UI 状态（Modal / Tabs）
  • 表单
  • 简单父子通信
上次更新: 2026/01/09, 03:42:28
react全家桶概览

←

Copyright © 2015-2026 Glitz Ma