Redux-persist didn't update state

Question

I'm new to React Native and Redux. Currently I'm working on a project using Expo that I would like to store some "notes" into Redux store and persist in AysncStorage.

my 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);

my 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>
  );
...

If I do not use persistReducer (i.e. plain note:noteReducer), I can update state and reflect new value in my app. But after applying persistReducer, it seems won't update the state at all.

The state I return from reducer is producing the correct result:

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

I tried to add a note "What is inside" and the reducer produced the follow:

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

Then I try to input "Save again" into the same date, I can see that the state is still empty

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

There isn't any error message but just it seems not doing anything. Is there something wrong with my code? Been trying for the last 2 days about this. Many Thanks!

Answer 1

I think you need root persist config and put rootReducer as argument in 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);