React Native 状态管理：Redux 实战指南

引言 / 什么是 React Native 状态管理与 Redux

在 React Native 开发中，随着应用复杂度提升，组件间的状态共享和同步成为关键挑战。传统的 useState 或 useReducer 在跨组件通信时显得力不从心，而 Redux 作为一款成熟的状态管理库，通过集中式存储和单向数据流解决了这一问题。

Redux 的核心思想是：全局状态存储在单一 Store 中，通过 Reducer 函数处理状态变更，通过 Action 触发更新。这种模式尤其适合中大型 React Native 应用，例如电商购物车、社交媒体动态列表等需要多组件同步的场景。本文将通过实战案例，从基础到进阶全面讲解 Redux 的使用。

准备工作

1. 环境要求：

   • React Native 0.60+（推荐使用 Expo 或裸 React Native 项目）
   • Node.js 14+
   • npm/yarn 包管理工具

2. 安装依赖：

   npm install redux react-redux @reduxjs/toolkit
   # 或使用 yarn
   yarn add redux react-redux @reduxjs/toolkit
   

   提示：@reduxjs/toolkit 是 Redux 官方推荐的简化工具包，能大幅减少样板代码。

基础操作：Redux 核心概念与集成

步骤一：创建 Redux Store

Store 是 Redux 的核心，负责存储全局状态。使用 createStore（传统方式）或 configureStore（推荐）创建：

// store.js
import { configureStore } from '@reduxjs/toolkit';

const initialState = {
  counter: 0,
  user: null,
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, counter: state.counter + 1 };
    case 'SET_USER':
      return { ...state, user: action.payload };
    default:
      return state;
  }
};

export const store = configureStore({
  reducer: rootReducer,
});

步骤二：在 React Native 中连接 Store

通过 Provider 组件将 Store 注入到应用根组件：

// App.js
import { Provider } from 'react-redux';
import { store } from './store';
import AppContent from './AppContent';

export default function App() {
  return (
    <Provider store={store}>
      <AppContent />
    </Provider>
  );
}

步骤三：使用 Action 和 Reducer 更新状态

在组件中通过 useDispatch 触发 Action：

// CounterComponent.js
import { useSelector, useDispatch } from 'react-redux';

export default function CounterComponent() {
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  return (
    <View>
      <Text>当前计数: {counter}</Text>
      <Button 
        title="增加" 
        onPress={() => dispatch({ type: 'INCREMENT' })} 
      />
    </View>
  );
}

进阶技巧：Redux Toolkit 与异步操作

技巧一：使用 Redux Toolkit 简化代码

传统 Redux 需要手动编写 Action Types、Action Creators 和 Reducer，而 Redux Toolkit 的 createSlice 可以一键生成：

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

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

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

在 Store 中集成：

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

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

技巧二：处理异步操作（Redux Thunk）

对于 API 请求等异步操作，需使用中间件。以 Redux Thunk 为例：

1. 安装中间件：

   npm install redux-thunk
   

2. 配置 Store：

   import { createStore, applyMiddleware } from 'redux';
   import thunk from 'redux-thunk';
   import rootReducer from './reducers';
   
   export const store = createStore(rootReducer, applyMiddleware(thunk));
   

3. 编写异步 Action：

   // userActions.js
   export const fetchUser = (userId) => {
     return async (dispatch) => {
       dispatch({ type: 'FETCH_USER_REQUEST' });
       try {
         const response = await fetch(`https://api.example.com/users/${userId}`);
         const data = await response.json();
         dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
       } catch (error) {
         dispatch({ type: 'FETCH_USER_FAILURE', error });
       }
     };
   };
   

4. 在组件中调用：

   import { useDispatch } from 'react-redux';
   import { fetchUser } from './userActions';
   
   export default function UserProfile({ userId }) {
     const dispatch = useDispatch();
     useEffect(() => {
       dispatch(fetchUser(userId));
     }, [userId]);
     // ...渲染逻辑
   }
   

技巧三：状态选区优化（Reselect）

当状态计算复杂时，使用 reselect 创建记忆化选区：

// selectors.js
import { createSelector } from 'reselect';

const selectUser = (state) => state.user;
const selectCartItems = (state) => state.cart.items;

export const selectTotalPrice = createSelector(
  [selectUser, selectCartItems],
  (user, items) => {
    if (!user?.isPremium) return items.reduce((sum, item) => sum + item.price, 0);
    return items.reduce((sum, item) => sum + item.price * 0.9, 0); // 会员9折
  }
);

常见问题

Q：Redux 和 Context API 如何选择？
A：Context API 适合简单场景（如主题切换），而 Redux 适合复杂状态逻辑、中间件支持和时间旅行调试。

Q：如何避免 Redux 中的性能问题？
A：1. 使用 React.memo 包裹组件；2. 避免在选区中返回新对象/数组；3. 对大型状态分片管理。

Q：Redux Thunk 和 Redux Saga 的区别？
A：Thunk 基于 Promise，适合简单异步；Saga 基于 Generator，适合复杂流程（如竞态条件处理）。

小结

本文通过代码示例和实战案例，系统讲解了 Redux 在 React Native 中的核心用法：从 Store 创建、Reducer 编写到异步中间件集成。对于现代开发，推荐优先使用 Redux Toolkit 减少样板代码，并结合 Reselect 优化性能。遇到复杂异步逻辑时，可根据项目需求选择 Thunk 或 Saga。

掌握 Redux 后，你将能高效管理 React Native 应用的全局状态，尤其适合电商、社交等需要多组件协同的场景。立即动手实践吧！