React Native Redux 使用指南 redux-toolkit

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. 安装依赖

1. npm install @reduxjs/toolkit react-redux

复制代码

2. 创建 Slice

1. import { createSlice } from "@reduxjs/toolkit";
3. // 定义RootState类型
4. export interface RootState {
5.   counter: {
6.     value: number;
7.   };
8. }
10. export const counterSlice = createSlice({
11.   name: "counter",
12.   initialState: {
13.     value: 0,
14.   },
15.   reducers: {
16.     increment: (state) => {
17.       state.value += 1;
18.     },
19.     decrement: (state) => {
20.       state.value -= 1;
21.     },
22.     incrementByAmount: (state, action) => {
23.       state.value += action.payload;
24.     },
25.   },
26. });
28. // 导出选择器
29. export const selectCount = (state: RootState) => state.counter.value;
31. export const { increment, decrement, incrementByAmount } = counterSlice.actions;
32. export default counterSlice.reducer;

复制代码

3. 设置 Store

1. import { configureStore } from "@reduxjs/toolkit";
2. import counterReducer from "./counter/counterSlice";
4. export default configureStore({
5.   reducer: {
6.     counter: counterReducer,
7.   },
8. });

复制代码

4. Provider 包裹应用

1. import { Provider } from "react-redux";
2. import store from "./src/store";
4. export default function App() {
5.   return (
6.     <Provider store={store}>
7.       <Son />
8.     </Provider>
9.   );
10. }

复制代码

5. 组件中使用

1. import { View, Text, Button } from "react-native";
2. import store from "./src/store";
3. import { Provider } from "react-redux";
4. import { useSelector, useDispatch } from "react-redux";
5. import { increment, selectCount } from "./src/store/counter/counterSlice";
7. export default function App() {
8.   return (
9.     <Provider store={store}>
10.       <Son />
11.     </Provider>
12.   );
13. }
14. const Son = () => {
15.   const count = useSelector(selectCount);
16.   const dispatch = useDispatch();
17.   return (
18.     <View>
19.       <Button
20.         title="增加"
21.         onPress={() => {
22.           // 增加数量
23.           dispatch(increment());
24.         }}
25.       />
26.       <Text>Counter: {count}</Text>
27.     </View>
28.   );
29. };

复制代码

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. 安装依赖

1. npm install  redux-persist @react-native-async-storage/async-storage

复制代码

2. 设置持久化存储

在 store 设置文件中集成 redux-persist：

1. import { combineReducers, configureStore } from "@reduxjs/toolkit";
2. import counterReducer from "./counter/counterSlice";
3. import AsyncStorage from "@react-native-async-storage/async-storage";
4. import { persistStore, persistReducer } from "redux-persist";
6. // 持久化配置
7. const persistConfig = {
8.   key: "root", // 存储的键名
9.   storage: AsyncStorage, // 使用AsyncStorage作为存储引擎
10.   whitelist: ["counter"], // 仅持久化指定Reducer
11.   // blacklist: ['otherReducer'], // 可选：排除指定Reducer
12. };
14. // 合并所有reducer
15. const rootReducer = combineReducers({
16.   counter: counterReducer,
17. });
19. // 创建持久化的reducer
20. const persistedReducer = persistReducer(persistConfig, rootReducer);
22. // 创建store
23. export const store = configureStore({
24.   reducer: persistedReducer,
25.   middleware: (getDefaultMiddleware) =>
26.     getDefaultMiddleware({ serializableCheck: false }),
27. });
29. // 创建持久化存储实例
30. export const persistor = persistStore(store);

复制代码

3. 在应用中集成 PersistGate

在应用根组件中包装 PersistGate，确保在数据加载完成前显示加载状态：

1. import { Provider } from "react-redux";
2. import { PersistGate } from "redux-persist/integration/react";
3. import { store, persistor } from "./src/store";
5. export default function App() {
6.   return (
7.     <Provider store={store}>
8.       <PersistGate persistor={persistor}>
9.         {/* 应用组件  你的组件 */}
10.         <YourAppComponent />
11.       </PersistGate>
12.     </Provider>
13.   );
14. }

复制代码

redux 持久化总结

持久化设置选项

redux-persist 提供多种设置选项：

• key: 存储在 AsyncStorage 中的键名
  
• storage: 存储引擎，React Native 中通常使用 AsyncStorage
  
• whitelist: 需要持久化的 reducer 名称数组
  
• blacklist: 不需要持久化的 reducer 名称数组
  
• transforms: 在持久化前转换 state 的方法数组
  
• stateReconciler: 如何合并初始和存储的状态
  
• version: 状态版本控制
  

特殊说明

• 使用configureStore时，需要禁用序列化查抄：
  

1. middleware: getDefaultMiddleware =>
2.    getDefaultMiddleware({serializableCheck: false});

复制代码

• PersistGate组件可以设置 loading 属性来自定义加载状态
  
• 可以使用persistor.purge()方法清除所有持久化数据
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。