Redux-persist 没有更新状态

Question

我是 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后，好像根本不会更新state

来自 reducer 的状态 I return 正在产生正确的结果：

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",
  },
}

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

Answer 1

我认为您需要 root 持久化配置并将 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);

Redux-persist 没有更新状态

Redux-persist didn't update state

react-native

react-redux

expo

redux-persist