React Native Redux 使用指南 redux-toolkit
一个可预测和可维护的全局状态管理 JavaScript 库
Redux 和 React-Redux以及**@reduxjs/toolkit 的关系：**
Redux、React-Redux、@reduxjs/toolkit 是 React 生态中状态管理的「黄金三角组合」，它们的关系可以用 「核心库 → 框架适配器 → 官方优化工具集」 来概括：
- Redux（核心库）
独立于框架的状态管理容器，解决「跨组件状态共享」问题（如全局主题、用户登录态）
- React-Redux（框架适配器）
Redux 与 React 的官方桥梁，解决「组件与 Redux 通信」问题
- @reduxjs/toolkit（官方优化工具集）
Redux 的「现代化开发工具包」，解决「传统 Redux 样板代码冗余」的痛点
@reduxjs/toolkit 基本使用
1. 安装依赖
npm install @reduxjs/toolkit react-redux
2. 创建 Slice
import { createSlice } from "@reduxjs/toolkit";// 定义RootState类型
export interface RootState {counter: {value: number;};
}export const counterSlice = createSlice({name: "counter",initialState: {value: 0,},reducers: {increment: (state) => {state.value += 1;},decrement: (state) => {state.value -= 1;},incrementByAmount: (state, action) => {state.value += action.payload;},},
});// 导出选择器
export const selectCount = (state: RootState) => state.counter.value;export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;
3. 配置 Store
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counter/counterSlice";export default configureStore({reducer: {counter: counterReducer,},
});
4. Provider 包裹应用
import { Provider } from "react-redux";
import store from "./src/store";export default function App() {return (<Provider store={store}><Son /></Provider>);
}
5. 组件中使用
import { View, Text, Button } from "react-native";
import store from "./src/store";
import { Provider } from "react-redux";
import { useSelector, useDispatch } from "react-redux";
import { increment, selectCount } from "./src/store/counter/counterSlice";export default function App() {return (<Provider store={store}><Son /></Provider>);
}
const Son = () => {const count = useSelector(selectCount);const dispatch = useDispatch();return (<View><Buttontitle="增加"onPress={() => {// 增加数量dispatch(increment());}}/><Text>Counter: {count}</Text></View>);
};
Redux Toolkit 总结
Redux Toolkit 核心概念
- createSlice: 简化创建 reducer 和 action 的函数，自动生成 action creators 和 action types
- configureStore: 简化 store 的配置，自动配置 Redux DevTools 和中间件
- Provider: React-Redux 提供的组件，使整个应用可以访问 Redux store
- useSelector: 从 Redux store 中提取数据的 Hook
- useDispatch: 获取 dispatch 函数的 Hook，用于派发 actions
数据流向
- 用户交互触发
dispatch(action) - Store 调用 reducer 处理 action
- Reducer 根据 action 返回新状态
- Store 通知所有订阅者（组件）
- 使用
useSelector的组件重新渲染
Redux 持久化存储
Redux 持久化存储可以在应用重启后保留状态数据，通过redux-persist库实现
1. 安装依赖
npm install redux-persist @react-native-async-storage/async-storage
2. 配置持久化存储
在 store 配置文件中集成 redux-persist：
import { combineReducers, configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counter/counterSlice";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { persistStore, persistReducer } from "redux-persist";// 持久化配置
const persistConfig = {key: "root", // 存储的键名storage: AsyncStorage, // 使用AsyncStorage作为存储引擎whitelist: ["counter"], // 仅持久化指定Reducer// blacklist: ['otherReducer'], // 可选：排除指定Reducer
};// 合并所有reducer
const rootReducer = combineReducers({counter: counterReducer,
});// 创建持久化的reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);// 创建store
export const store = configureStore({reducer: persistedReducer,middleware: (getDefaultMiddleware) =>getDefaultMiddleware({ serializableCheck: false }),
});// 创建持久化存储实例
export const persistor = persistStore(store);
3. 在应用中集成 PersistGate
在应用根组件中包装 PersistGate，确保在数据加载完成前显示加载状态：
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { store, persistor } from "./src/store";export default function App() {return (<Provider store={store}><PersistGate persistor={persistor}>{/* 应用组件 你的组件 */}<YourAppComponent /></PersistGate></Provider>);
}
redux 持久化总结
持久化配置选项
redux-persist 提供多种配置选项：
key: 存储在 AsyncStorage 中的键名storage: 存储引擎，React Native 中通常使用 AsyncStoragewhitelist: 需要持久化的 reducer 名称数组blacklist: 不需要持久化的 reducer 名称数组transforms: 在持久化前转换 state 的方法数组stateReconciler: 如何合并初始和存储的状态version: 状态版本控制
特别说明
- 使用
configureStore时，需要禁用序列化检查：
middleware: getDefaultMiddleware =>getDefaultMiddleware({serializableCheck: false});
PersistGate组件可以设置 loading 属性来自定义加载状态- 可以使用
persistor.purge()方法清除所有持久化数据
