react native cli 使用 redux 流程记录

一. 安装依赖

安装 redux、react-redux、@reduxjs/toolkit。
持久化存储还需要安装 redux-persist、@react-native-async-storage/async-storage。

npm install redux react-redux @reduxjs/toolkit redux-persist @react-native-async-storage/async-storage

二. 创建store

1. 首先创建store文件夹，存放所有redux相关文件。

2. 创建slices文件夹，存放所有拆分的slice文件。

这里举例，假设有两个slice，slices/userSlice.js和slices/otherSlice.js分别存放用户数据和其它数据。实际根据需求创建相应的slice。

代码如下：

import {createSlice} from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: {
    /* 初始状态 */
    userData: {},
  },
  reducers: {
    setUserData: (state, action) => {
      state.userData = action.payload;
    },
  },
});

export const {setUserData} = userSlice.actions;

export default userSlice.reducer;

点击查看代码

import {createSlice} from '@reduxjs/toolkit';

const otherSlice = createSlice({
  name: 'other',
  initialState: {
    /* 初始状态 */
  },
  reducers: {
    // 定义相关的reducer
    /* 省略其他reducer */
  },
});

export const {
  /* 相关的actions */
} = otherSlice.actions;

export default otherSlice.reducer;

3. 创建reducers.js作为根reducer

import {combineReducers} from '@reduxjs/toolkit';
import userReducer from './slices/userSlice';
import otherSlice from './slices/otherSlice';
// import xxxReducer from './slices/xxxSlice';

const rootReducer = combineReducers({
  user: userReducer,
  other: otherSlice,
  // xxx: xxxReducer,
});

export default rootReducer;

4. 创建index.js作为Redux Store：

①一般写法

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

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

export default store;

②使用持久化存储的写法

import {configureStore} from '@reduxjs/toolkit';
import {persistReducer, persistStore} from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';
import rootReducer from './reducers';

const persistConfig = {
  key: 'root', // 用于在存储中标识根对象
  storage: AsyncStorage,
  whitelist: ['user'],
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: () => [],
});
export const persistor = persistStore(store);

三、在根组件注册

import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';
import MyComponent from './MyComponent';
import {ToastProvider} from 'react-native-toast-notifications';
import { NavigationContainer } from '@react-navigation/native';

export default function Main() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <ToastProvider>
          <NavigationContainer>
            <MyComponent />
            {/* 在这里可以渲染其他需要访问store的组件 */}
          </NavigationContainer>
        </ToastProvider>
      </PersistGate>
    </Provider>
  );
}

首先从redux-persist中导入PersistGate，然后使用PersistGate组件包装整个应用程序的渲染。我们将persistor作为PersistGate的persistor属性值传递。loading属性用于指定在持久化恢复之前显示的加载UI。

四、组件中引入并使用

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { /* 用户数据相关的actions */ } from './slices/userSlice';
import { /* 其他数据相关的actions */ } from './slices/otherSlice';

const MyComponent = () => {
  const userData = useSelector((state) => state.user);
  const otherData = useSelector((state) => state.other);
  const dispatch = useDispatch();

  // 使用dispatch函数调用相应的action
  const updateUser = () => {
    dispatch(/* 用户数据相关的action */);
  };

  const updateOtherData = () => {
    dispatch(/* 其他数据相关的action */);
  };

  // 渲染组件
  return (
    <div>
      <h1>User Data: {userData}</h1>
      <button onClick={updateUser}>Update User Data</button>

      <h1>Other Data: {otherData}</h1>
      <button onClick={updateOtherData}>Update Other Data</button>
    </div>
  );
};

export default MyComponent;

五、相关链接

redux 原版文档
redux-toolkit 原版文档

redux 文档中文版
redux-toolkit 文档中文版