Updates to store aren't being persisted. V5

[jashelton]

I am trying to persist two pieces of the store. One being auth info and the other being user preferences.

const initialState = { auth: {}, preferences: defaultUserPreferences }; When the use logs in, auth is updated and persists. Later, I ask the user for push notification permissions and then I want to update auth.push_token: null to contain the push_token. The problem is that it doesn't persist.

Also, I set default user preferences for each user which is fine, but as the user updates preferences, the new preferences aren't persisted.

// configureStore.js

import { createStore, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import logger from 'redux-logger';
import axios from 'axios';
import axiosMiddleware from 'redux-axios-middleware';

import { ENDPOINT } from 'react-native-dotenv';
import reducer from '../reducer';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['auth', 'preferences'],
};

const client = axios.create({
  baseURL: ENDPOINT,
  responseType: 'json'
});

const persistedReducer = persistReducer(persistConfig, reducer);

export default () => {
  const store = createStore(persistedReducer, applyMiddleware(axiosMiddleware(client), logger));
  const persistor = persistStore(store);
  return { store, persistor };
}

// App.js
import React from 'react';
import { ActivityIndicator, AsyncStorage } from 'react-native';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';

import Navigator from './Navigator';
import configureStore from './store/configureStore';

const { persistor, store } = configureStore();

export default class App extends React.Component {
  render() {
    return(
      <Provider store={store}>
        <PersistGate loading={<ActivityIndicator />} persistor={persistor}>
          <Navigator />
        </PersistGate>
      </Provider>
    );
  }
}

// reducer.js
export const SET_AUTH = 'app/auth/SET_AUTH';
export const UPDATE_AUTH = 'app/auth/UPDATE_AUTH';
export const UPDATE_AUTH_SUCCESS = 'app/auth/UPDATE_AUTH_SUCCESS';
export const SET_PREFERENCES_SUCCESS = 'app/preferences/SET_PREFERENCES_SUCCESS';

import { defaultUserPreferences } from './helpers/defaultUserPreferences';

const initialState = { auth: {}, preferences: defaultUserPreferences, pets: [] };

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case SET_AUTH:
      return { ...state, loading: false, auth: action.payload.data };
    case UPDATE_AUTH:
      return { ...state, loading: true };
    case UPDATE_AUTH_SUCCESS:
      return { ...state, loading: false, auth: action.payload.data.user[0] };
    case SET_PREFERENCES_SUCCESS:
      return { ...state, loading: false, preferences: action.payload.data };
    case "persist/PERSIST":
      console.log('------------------------PERSIST HAS BEEN CALLED------------------------')
    default:
      return state;
  }
}

export function setAuth(data) {
  return {
    type: SET_AUTH,
    payload: { data }
  };
}

export function updateAuth(user_id) {
  return {
    type: UPDATE_AUTH,
    payload: {
      request: {
        url: `/users/${user_id}`
      }
    }
  }
}

export function setPreferences(data) {
  return {
    type: SET_PREFERENCES,
    payload: { data }
  }
}

My main confusion is why auth is persisting initially but if it's updated and there is a hard refresh, I lose the updates.

[razvan-tudosa]

Anybody has an idea on what goes wrong there? I'm having almost the same set-up and exactly the same problem.

LE: for the time being I downgraded to 5.6.12 and seems to be working fine.

[patrickcze]

Also having the same issue

[JaceHensley]

Also having the same issue but I'm also on v4.10.2. I can see that values get written to localStorage and they are updated when they should be. But on page reload it seems like the values do not get read/set in the redux store

[kopax]

is this fixed? Why is it close?

[jqn]

@kopax I was also having this issue today where I had an array of objects and the updated state wouldn't persist when removing and item from this array. I realized after some debugging that I was mutating existing objects. After following this advice https://github.com/rt2zz/redux-persist/issues/897#issuecomment-452200271 I was able to fix it.

[MohammadMoeinFazeli]

Also having the same issue