Redux Perist 不存储数据

Question

#商店

import {  combineReducers, configureStore } from "@reduxjs/toolkit";
import { persistReducer, persistStore } from "redux-persist";
import AsyncStorage from '@react-native-async-storage/async-storage';
import addUserSlice, { signInUser } from "./slices/addUserSlice";
import { thunk } from "redux-thunk";

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    whitelist:['addUser']
}


const persistedReducer = persistReducer(persistConfig,addUserSlice)
export const store = configureStore(
    {
       reducer: persistedReducer,
       middleware: (getDefaultMiddleware) => getDefaultMiddleware({
        immutableCheck: false,
        serializableCheck: false,
      })      

    }
);
export const persistor = persistStore(store)

#切片

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


export const addUserSlice = createSlice({
    name:'addUser',
    initialState:{
        userData:[]
    },

    reducers:{
        signupUser:(state, action)=>{

            console.log("adduser slice-----", action.payload) 
            state.userData.push(action.payload)

        },
        signInUser:(state, action)=>{
            const {username, password} = action.payload
            return state.filter(item=>item.username===username && item.password ===password)
        }

    }
})

export const { signupUser, signInUser } = addUserSlice.actions; 
export default addUserSlice.reducer

我尝试使用 Redux-Persist 和 redux Toolkit 将数据存储在 AsyncStorage 中。但异步存储中没有存储任何数据。我需要将数据存储在异步存储中，因此刷新时它不应该丢失

Answer 1

import {  combineReducers, configureStore } from "@reduxjs/toolkit";
import { persistReducer, persistStore } from "redux-persist";
import AsyncStorage from '@react-native-async-storage/async-storage';
import addUserSlice, { signInUser } from "./slices/addUserSlice";
import { thunk } from "redux-thunk";

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    whitelist:['addUser']
}


const persistedReducer = persistReducer(persistConfig,addUserSlice)
export const store = configureStore(
    {
       reducer: persistedReducer,
       middleware: (getDefaultMiddleware) => getDefaultMiddleware({
        immutableCheck: false,
        serializableCheck: false,
      })      

    }
);
export const persistor = persistStore(store)

#切片

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


export const addUserSlice = createSlice({
    name:'addUser',
    initialState:{
        userData:[]
    },

    reducers:{
        signupUser:(state, action)=>{

            console.log("adduser slice-----", action.payload) 
            state.userData.push(action.payload)

        },
        signInUser:(state, action)=>{
            const {username, password} = action.payload
            return state.filter(item=>item.username===username && item.password ===password)
        }

    }
})

export const { signupUser, signInUser } = addUserSlice.actions; 
export default addUserSlice.reducer

您需要包装 persistor 并将其存储到 app.js 文件中，例如：

import {LogBox, Platform, SafeAreaView} from 'react-native';
import AppProvider from './src/context/AppProvider';
import RootNavigator from './src/navigation/rootNavigator';
import Toast from 'react-native-toast-message';
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/integration/react';
import {persistor, store} from './src/redux/store';
import {LogLevel, OneSignal} from 'react-native-onesignal';
import {setUserData} from './src/utils/user.util';
import {updateUserData} from './src/services/firebase.service';
function App(): JSX.Element {
 

  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <SafeAreaView style={{flex: 1, backgroundColor: 'white'}}>
          <AppProvider>
            <RootNavigator />
          </AppProvider>
          <Toast />
        </SafeAreaView>
      </PersistGate>
    </Provider>
  );
}

export default App;