Redux persist not syncing

Viewed 218

Im using react native with expo, I have redux persist and im able to use it fine to get the state from the store however when i reload the app, the state does not persist.

Im wondering if there is some other step to have your state sync with the async storage state.

I am using a dispatch method to change the state, Then i print the updated state - all good. But then i print what is stored in the asyc storage and only the old state is stored.

I have also done this on web browser and seen the same thing, The state updates fine in the application, Then when i check the storage nothing has changed and it still has the 'initialState' variable as state and the updates are not being added to the storage.

heres my outer component:

    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
          <ThemeProvider theme={theme}>
            <AppGateway />
          </ThemeProvider>
        <StatusBar style="auto" />
      </PersistGate>
    </Provider>

The dispatch method to update the state:


  async function handleSubmit() {

    dispatch(createUser(fakeuser)).....

The reducer/duck

const CREATEUSER = 'createuser'

export const createUser = ({name, id, email}) => ({
  type: CREATEUSER,
  payload: {
    id,
    name,
    email,
    created_account: Math.floor(Date.now() / 1000),
    last_login: Math.floor(Date.now() / 1000),
  }
})


function userReducer (state = initialState, action) {
  switch (action.type) {

    case CREATEUSER:
      return {...state, account:{...state.account, ...action.payload} }
      break;

  
    default:
      return state
  }
}

export default userReducer;

and my config

import {createStore , combineReducers} from 'redux'
import userReducer from './ducks/user'
import { persistStore, persistReducer } from 'redux-persist'
// import AsyncStorage from 'redux-persist/lib/storage'
import AsyncStorage from '@react-native-async-storage/async-storage';

const reducer = combineReducers({
  user: userReducer
})

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
}

const persistedReducer = persistReducer(persistConfig, reducer)

export default () => {
  let store = createStore(persistedReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}
0 Answers
Related