从零开始学习 Redux：React Native 项目中的状态管理

原创

于 2025-07-16 16:24:45 发布 · 1.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#react native #学习 #react.js

Redux 是一个用于 JavaScript 应用程序的状态管理库，通常与 React 或 React Native 配合使用，帮助管理应用的状态和数据流。其核心原理是通过集中式的“单一数据源”来管理应用状态，避免组件之间的“层层传递”状态和副作用。

Redux 的原理

单一数据源（Store）
Redux 维护一个全局状态树（即 Store），所有组件都通过读取这个状态树来获取数据。应用中的所有状态（数据）都存储在这个单一的 store 中，这样可以保证应用状态的一致性。
State 是只读的
在 Redux 中，整个应用的状态是只读的，你不能直接修改状态。要改变状态，必须通过触发 action 来执行。
Actions
Action 是描述要发生什么的普通 JavaScript 对象，通常包含 type 字段（标识该 Action 的类型），可能还会包含其他数据（payload）。例如：
```
{
     
     
  type: 'ADD_TODO',
  payload: 'Buy milk'
}
```
Actions 是 Redux 的唯一方式来改变 state。
Reducers
Reducer 是纯函数，用来指定如何根据不同的 action 来更新 state。它接收当前的 state 和 action，然后返回一个新的 state。Reducer 不会直接修改原始 state，而是返回一个新的对象，确保 Redux 的不可变性原则。
```
const todosReducer = (state = [], action) => {
     
     
  switch (action.type) {
     
     
    case 'ADD_TODO':
      return [...state, action.payload];
    default:
      return state;
  }
};
```
Dispatch
dispatch 是一个函数，允许你发送 Action 到 Redux store。这样就会触发相应的 Reducer 来更新 state。
Store
Store 是 Redux 中的核心，它保存了应用的状态，并允许你获取状态、发送 Action、以及订阅状态变化。通常，我们通过 createStore() 创建一个 store。
```
import {
     
      createStore } from 'redux';
const store = createStore(todosReducer);
```
订阅（Subscribe）
组件可以通过订阅 store 来获取状态的更新，通常使用 store.subscribe() 方法。Redux 与 React 的集成通常通过 React-Redux 库来简化订阅和更新的过程。

什么时候使用 Redux 管理状态

Redux 主要适用于以下几种情况：

多个组件共享状态
如果应用中的多个组件需要访问或修改相同的数据，Redux 可以有效地避免数据传递问题，确保所有组件共享的是一致的状态。
复杂的状态逻辑
如果应用的状态逻辑复杂，包含很多状态之间的依赖关系，或者需要执行大量的异步操作，Redux 提供了清晰的结构来管理这些状态变更。
跨组件通信
如果你有多个不直接相关的组件需要通信（例如，在某个组件中修改了数据，其他组件需要更新），使用 Redux 可以避免复杂的传递关系，简化跨组件通信。
调试和持久化
Redux 的状态是不可变的，便于调试。你可以通过 Redux DevTools 查看应用状态的变化过程，还可以方便地在应用崩溃时恢复状态。

在 React Native 项目中使用 Redux

以下是如何在 React Native 项目中具体使用 Redux 的步骤：

1. 安装相关依赖

首先，安装 Redux 和 React-Redux：

npm install redux react-redux

2. 创建 Action 和 Reducer

创建 Action（例如：添加任务）

// actions/todoActions.js
export const addTodo = (text) => ({
   
   
  type: 'ADD_TODO',
  payload: text,
});

创建 Reducer

// reducers/todoReducer.js
const initialState = {
   
   
  todos: [],
};

const todoReducer = (state = initialState, action) => {
   
   
  switch (action.type) {
   
   
    case 'ADD_TODO':
      return