Redux-persist 没有更新状态答案

【问题标题】：Redux-persist didn't update stateRedux-persist 没有更新状态
【发布时间】：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",
  },
}

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

【问题讨论】：

标签： react-native react-redux expo redux-persist

【解决方案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);

【讨论】：