React Native Redux 使用指南 redux-toolkit

React Native Redux 使用指南 redux-toolkit

一个可预测和可维护的全局状态管理 JavaScript 库

Redux 和 React-Redux以及**@reduxjs/toolkit 的关系：**

Redux、React-Redux、@reduxjs/toolkit 是 React 生态中状态管理的「黄金三角组合」，它们的关系可以用 「核心库 → 框架适配器 → 官方优化工具集」 来概括：

1. Redux（核心库）

独立于框架的状态管理容器，解决「跨组件状态共享」问题（如全局主题、用户登录态）

2. React-Redux（框架适配器）

Redux 与 React 的官方桥梁，解决「组件与 Redux 通信」问题

3. @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>
      <Button
        title="增加"
        onPress={() => {
          // 增加数量
          dispatch(increment());
        }}
      />
      <Text>Counter: {count}</Text>
    </View>
  );
};

Redux Toolkit 总结

Redux Toolkit 核心概念

1. createSlice: 简化创建 reducer 和 action 的函数，自动生成 action creators 和 action types
2. configureStore: 简化 store 的配置，自动配置 Redux DevTools 和中间件
3. Provider: React-Redux 提供的组件，使整个应用可以访问 Redux store
4. useSelector: 从 Redux store 中提取数据的 Hook
5. useDispatch: 获取 dispatch 函数的 Hook，用于派发 actions

数据流向

1. 用户交互触发 dispatch(action)
2. Store 调用 reducer 处理 action
3. Reducer 根据 action 返回新状态
4. Store 通知所有订阅者（组件）
5. 使用 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 中通常使用 AsyncStorage
• whitelist: 需要持久化的 reducer 名称数组
• blacklist: 不需要持久化的 reducer 名称数组
• transforms: 在持久化前转换 state 的方法数组
• stateReconciler: 如何合并初始和存储的状态
• version: 状态版本控制

特别说明

1. 使用configureStore时，需要禁用序列化检查：

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

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