Redux-persist未更新状态

Question

我是第一次使用React Native和Redux。目前我正在做一个使用世博会的项目，我想将一些“笔记”存储到Redux store中，并坚持使用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 (即普通的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
    }
    
}

我尝试添加一个注释"What is inside“，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",
  },
}

然后我尝试在同一日期输入"Save see“，我可以看到状态仍然是空的

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

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