Redux：React Native 中的状态管理模式

Q: Redux 与 React 中的 Context API 有何不同？

Redux — 带有 Store、DevTools、Middleware 和不可变状态的完整解决方案。Context API — React 内置的无需 props drilling 的数据传递机制。Context 适用于全局主题和本地化，Redux 适用于带有异步操作、缓存和调试的复杂状态。在大型应用中，Context 会导致不必要的重新渲染，而 Redux 通过选择器解决了这个问题。

Q: Redux Toolkit 中的 Immer 是什么？

Immer — 一个用于不可变状态操作的库，内置在 Redux Toolkit 中。Immer 允许像直接修改 state 一样编写 reducer：state.value += 1。在底层，Immer 创建代理对象 (draft)，跟踪更改并返回新的不可变对象。这将 reducer 的代码量减少 50% 并消除意外的突变。

Q: 如何测试 Redux？

Redux 逻辑被隔离测试：Reducer — 纯函数，只需使用不同的 Action 调用并检查结果。Action Creator — 检查返回的对象。Thunk — 模拟 API，调用 dispatch 并检查哪些 Action 被发送。带有 useSelector 的组件 — 在渲染器中使用带有测试 Store 的 Provider。Redux DevTools 通过重现实际会话中的 Action 序列帮助编写测试。

Q: 何时使用 Redux 而不是 useState？

useState 对于单个组件的本地状态足够：字段文本、打开/关闭的模态框。Redux 在以下情况下需要：状态在多个屏幕之间共享、需要异步同步（来自服务器的数据）、需要在应用重启之间保持 (persist)，或需要时间旅行调试。对于小型应用，Redux 过于复杂——请使用 Context + useReducer。

Q: Redux 中的 normalize 是什么？

Normalizr — 一个将嵌套数据规范化为扁平 Store 结构的库。不再存储 user.posts[0].comments 等深层对象，规范化创建字典：entities.users、entities.posts、entities.comments，通过 ID 进行引用。这简化了在所有位置更新单个实体的操作，并加快了选择器的速度。Redux Toolkit 建议对复杂模型使用规范化数据。

作者： IT Sectr 发布日期: 2026-02-19 阅读时间: 8 分钟

Redux — 一个为 JavaScript 应用设计的可预测状态管理容器，由 Dan Abramov 于 2015 年创建。Redux 基于 Flux 架构实现了单向数据流：状态存储在唯一的 Store 中，仅通过纯函数 Reducer 进行更改，并通过 Action 和 Dispatch 触发。根据 npm Trends 数据，Redux 每周保持超过 700 万次下载，仍然是 React Native 和 Web 应用中状态管理的标准。

要点

Store — 唯一的真相来源，存储应用的完整状态树
Action — 带有 type 字段的对象，描述更改状态的意图
Reducer — 纯函数 (prevState, action) => newState，无副作用
Dispatch — Store 的方法，用于将 Action 发送到 Reducer
Middleware — dispatch 和 reducer 之间的中间层，用于异步操作和日志记录

什么是 Redux？

Redux — 一种基于三个原则的架构模式和状态管理库：单一真相来源 (single source of truth)、只读状态 (read-only) 和通过纯函数进行更改。与 MVC 不同（模型可以不可预测地更改状态），Redux 保证了确定性：输入相同的数据，结果总是相同的。

Redux 的灵感来自 Facebook 的 Flux 架构和 Elm 语言。与 Flux 的主要区别在于 — 使用单一 Store 而非多个。在 Redux 中，应用的整个状态 — 对象、数组、加载标志 — 都存储在一个树中。这简化了调试、测试和状态恢复（时间旅行调试）。开发者可以保存整个 Store，重现 Action 序列，并查看状态在每个步骤中如何变化。

根据 State of JS 2025 数据，68% 使用状态管理的受访者选择 Redux 或 Redux Toolkit。该工具得到所有现代框架的支持：React、React Native、Angular、Vue，甚至无框架的纯 JavaScript。

单向数据流

Unidirectional data flow — Redux 的核心原则，数据严格朝一个方向流动：View → Action → Dispatch → Reducer → Store → View。任何组件都不能直接更改 Store。View 仅通过 useSelector 或 connect 订阅更改，并通过 dispatch 发起更改。

Redux 工作循环： 用户点击按钮 → 组件调用 dispatch({ type: 'INCREMENT' }) → Store 将 Action 传递给 Root Reducer → Reducer 计算新状态 → Store 通知订阅者 → View 使用新数据重新渲染。这个循环保证了每次更改都有明确的起因，即特定的 Action。

DevTools — Redux 内置工具，用于监控每个 Action、Store 状态和执行时间。开发者可以看到所有已派发的 Action 列表、前后的状态差异 (diff)，并且可以回退到任何以前的状态。这使得复杂状态的调试比普通日志记录快数十倍。

Redux 核心组件

Store — 包含完整状态树的对象。通过 configureStore (RTK) 或 createStore 创建。Store 提供三个方法：用于读取的 getState()、用于更改的 dispatch(action) 和用于订阅的 subscribe(listener)。在 Redux Toolkit 中，Store 已经包含 middleware、DevTools 和切片支持。

TypeScript

import { configureStore } from '@reduxjs/toolkit'

interface CounterState {
  value: number
}

const initialState: CounterState = { value: 0 }

function counterReducer(
  state = initialState,
  action: { type: string }
): CounterState {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 }
    default:
      return state
  }
}

const store = configureStore({ reducer: counterReducer })
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState()) // { value: 1 }

Action 和 Action Creator — Action 是一个带有必需字段 type（字符串常量）和可选 payload（数据）的对象。Action Creator 是返回 Action 的函数。在 Redux Toolkit 中，使用 createAction 生成具有自动类型推断的 Action。

Reducer — 纯函数，接收当前状态和 Action，返回新状态。Reducer 不得：修改 state（应返回新对象）、调用 API、生成随机数或访问 Date。不可变性由展开运算符 ... 或 Immer（内置在 RTK 中）保证。

组件	职责	限制
Store	状态存储、dispatch、subscribe	每个应用一个
Action	描述更改状态的意图	必须有 type
Reducer	计算新状态	纯函数，无副作用
Dispatch	将 Action 发送到 Reducer	默认同步
Selector	从 Store 提取数据	通过 createSelector 实现记忆化

Middleware 和 Redux Thunk

Middleware — 插入在 dispatch 调用和 Action 到达 Reducer 之间的一系列函数。每个 middleware 接收 Store API，可以记录、修改、延迟或取消 Action。Redux Thunk — 用于异步操作的标准 middleware，允许派发函数而不是对象。

JavaScript

import { createAsyncThunk } from '@reduxjs/toolkit'

export const fetchUser = createAsyncThunk(
  'users/fetchById',
  async (userId: number, { rejectWithValue }) => {
    const response = await fetch(`/api/users/${userId}`)
    if (!response.ok)
      return rejectWithValue('Failed to fetch')
    return await response.json()
  }
)

流行的 middleware： Redux Thunk — 用于简单的异步调用，Redux Saga — 用于使用生成器 sagas 的复杂场景（防抖、竞态、并行请求），Redux Observable — 基于 RxJS 用于响应式流。在 Redux Toolkit 中，middleware 通过 configureStore 中的 middleware 参数连接。

根据 State of JS 2025 调查，Thunk 在 72% 的 Redux 项目中使用，Saga 在 18% 中使用，Observable 在 5% 中使用。对于大多数应用，Thunk + RTK Query 的组合足以覆盖 95% 的异步数据处理场景。

Redux Toolkit 和 RTK Query

Redux Toolkit (RTK) — 官方推荐的编写 Redux 逻辑的方式，于 2019 年发布。RTK 包含 configureStore、createSlice、createAsyncThunk 和 createEntityAdapter，将 Redux 样板代码减少 60-70%。无需手动创建 Action Creator、Reducer 和类型，只需使用一个 createSlice。

TypeScript

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

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

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

RTK Query — 基于 Redux Toolkit 的内置 API 解决方案。允许通过 createApi 声明式定义端点，具有自动钩子生成、缓存、标签失效和乐观更新功能。RTK Query 取代了为每个 API 请求手动编写 Thunk、Reducer 和 Selector 的工作。

Entity Adapter — createEntityAdapter 工具，用于规范化实体集合。为对象数组提供内置的 CRUD reducer、选择器和排序。如果 Store 中存储了用户、产品或订单列表——Entity Adapter 可将规约代码减少 80%。

React Native 中的 Redux

React Native Redux — JavaScript 移动应用的标准组合。Redux 通过 react-redux 的 Provider 集成，包裹应用的根组件。useSelector 和 useDispatch 钩子为组件提供状态访问，无需 props drilling。Persist — redux-persist 将 Store 保存到 AsyncStorage 或 MMKV 中，在应用重启后恢复状态。

React Native 的 Middleware： redux-flipper 用于通过 Flipper 调试，redux-observable 用于使用原生驱动器的响应式流，react-native-mmkv 用于快速持久化存储。导航插件 redux-first-router 将屏幕与 Store 连接，允许在返回时恢复屏幕状态。

在 React Native 中，Redux 与 network-first 策略一起使用：应用首先尝试从服务器加载数据，然后通过 RTK Query 或 redux-persist 缓存到 Store。离线模式通过 Redux + NetInfo + 连接恢复时重新发送的 Action 队列组合实现。

常见问题

Redux 与 React 中的 Context API 有何不同？

Redux — 带有 Store、DevTools、Middleware 和不可变状态的完整解决方案。Context API — React 内置的无需 props drilling 的数据传递机制。Context 适用于全局主题和本地化，Redux 适用于带有异步操作、缓存和调试的复杂状态。在大型应用中，Context 会导致不必要的重新渲染，而 Redux 通过选择器解决了这个问题。

Redux Toolkit 中的 Immer 是什么？

Immer — 一个用于不可变状态操作的库，内置在 Redux Toolkit 中。Immer 允许像直接修改 state 一样编写 reducer：state.value += 1。在底层，Immer 创建代理对象 (draft)，跟踪更改并返回新的不可变对象。这将 reducer 的代码量减少 50% 并消除意外的突变。

如何测试 Redux？

Redux 逻辑被隔离测试：Reducer — 纯函数，只需使用不同的 Action 调用并检查结果。Action Creator — 检查返回的对象。Thunk — 模拟 API，调用 dispatch 并检查哪些 Action 被发送。带有 useSelector 的组件 — 在渲染器中使用带有测试 Store 的 Provider。Redux DevTools 通过重现实际会话中的 Action 序列帮助编写测试。

何时使用 Redux 而不是 useState？

useState 对于单个组件的本地状态足够：字段文本、打开/关闭的模态框。Redux 在以下情况下需要：状态在多个屏幕之间共享、需要异步同步（来自服务器的数据）、需要在应用重启之间保持 (persist)，或需要时间旅行调试。对于小型应用，Redux 过于复杂——请使用 Context + useReducer。

Redux 中的 normalize 是什么？

Normalizr — 一个将嵌套数据规范化为扁平 Store 结构的库。不再存储 user.posts[0].comments 等深层对象，规范化创建字典：entities.users、entities.posts、entities.comments，通过 ID 进行引用。这简化了在所有位置更新单个实体的操作，并加快了选择器的速度。Redux Toolkit 建议对复杂模型使用规范化数据。

总结

Redux — 具有单一 Store 和纯 Reducer 的可预测状态容器
Action — 带有 type 的对象，Reducer — 纯函数，Dispatch — 发送机制
Redux Toolkit — 官方 API，包含 createSlice、createAsyncThunk 和 RTK Query
Middleware — 用于异步操作的中间层：Thunk、Saga、Observable
React Native 通过 Provider、useSelector 和 redux-persist 集成以支持离线模式
DevTools — 可重现每个 Action 的时间旅行调试
Normalizr — 为高效的选择器和更新进行数据规范化

我们将开发一款交钥匙移动应用程序

IT Sectr自2017年以来为初创企业和企业打造iOS和Android应用程序。我们将为您提供咨询并提出最佳解决方案。

讨论项目

另请阅读

Service Locator — 模式本质、DI替代方案与服务注册表 →

Provider是什么，Flutter中的状态管理 →

ViewModel — 什么是它，Android Architecture Component 和 Jetpack →

开发中的功能蔓延 — 什么是功能蔓延、原因及应对方法 →

开发中的垃圾代码 — 定义、特征以及如何整理 →