Redux-persist 没有更新状态

Posted 2023-02-19

【中文标题】Redux-persist 没有更新状态

【英文标题】：Redux-persist didn't update state

【发布时间】：2021-09-08 16:32:13

【问题描述】：

我是 React Native 和 Redux 的新手。目前我正在使用 Expo 进行一个项目，我想将一些“笔记”存储到 Redux 存储中并保存在 AysncStorage 中。

我的 store.js：

import thunk from 'redux-thunk';

import eventReducer,appReducer, noteReducer from './reducers';
import  persistStore, persistReducer,autoMergeLevel2,hardSet  from 'redux-persist'
import AsyncStorage from '@react-native-async-storage/async-storage';
const notePersistConfig = 
    key: 'note',
    storage: AsyncStorage,
    stateReconciler: autoMergeLevel2,
    timeout:null
  
  
const rootReducer = combineReducers( 
    events:eventReducer,
    app:appReducer,
    note: persistReducer(notePersistConfig, noteReducer),
    //note:noteReducer
);

export const store = createStore(rootReducer, applyMiddleware(thunk));
export const persistor = persistStore(store);

我的 app.js

import  store, persistor from './redux/store';
import  PersistGate  from 'redux-persist/integration/react'
...
return (
    <Provider store=store>
      <PersistGate loading=null persistor=persistor>
        <NavigationContainer theme=MyTheme>
          <Drawer.Navigator drawerPosition="right">
            <Drawer.Screen name="Home" component=Home />
          </Drawer.Navigator>
        </NavigationContainer>
      </PersistGate>
    </Provider>
  );
...

如果我不使用persistReducer（即普通的note:noteReducer），我可以更新状态并在我的应用程序中反映新的价值。但是在应用了persistReducer之后，似乎根本不会更新状态。

我从 reducer 返回的状态正在产生正确的结果：

export const noteReducer = (state=noteInitialState, action)=>
    console.log("noteReducer",action)
    console.log("note State is",state)

    switch (action.type) 
        
        
        case 'SET_NOTE':
            var new_state = state
            new_state[action.payload.date] = ...new_state[action.payload.date],note:action.payload.note
            console.log("here.... save note?",new_state)
            return new_state;
        
        default:
            return state
    
    

我尝试添加注释“里面是什么”，reducer 生成了以下内容：

noteReducer Object 
  "payload": Object 
    "date": "2021-06-28",
    "note": "What is inside",
  ,
  "type": "SET_NOTE",

note State is Object 
here.... save note? Object 
  "2021-06-28": Object 
    "note": "What is inside",
  ,

然后我尝试在同一日期输入“再次保存”，我可以看到状态仍然为空

noteReducer Object 
  "payload": Object 
    "date": "2021-06-28",
    "note": "Save again",
  ,
  "type": "SET_NOTE",

note State is Object 
here.... save note? Object 
  "2021-06-28": Object 
    "note": "Save again",
  ,

没有任何错误消息，但似乎什么也没做。我的代码有问题吗？最近两天一直在尝试这个。非常感谢！

【参考方案1】：

我认为您需要根持久化配置并将 rootReducer 作为参数放入 persistReducer(rootPersistConfig, rootReducer)

import thunk from 'redux-thunk';
import eventReducer,appReducer, noteReducer from './reducers';
import  persistStore, persistReducer,autoMergeLevel2,hardSet  from 'redux-persist'
import AsyncStorage from '@react-native-async-storage/async-storage';

const notePersistConfig = 
key: 'note',
storage: AsyncStorage,
stateReconciler: autoMergeLevel2,
timeout:null


const rootPersistConfig = 
key: 'root',
storage: AsyncStorage,


const rootReducer = combineReducers( 
events:eventReducer,
app:appReducer,
note: persistReducer(notePersistConfig, noteReducer),
//note:noteReducer
);

const persistedReducer = persistReducer(rootPersistConfig, rootReducer)

export const store = createStore(persistedReducer, applyMiddleware(thunk));
export const persistor = persistStore(store);