rt2zz / redux-persist

persist and rehydrate a redux store
MIT License
12.96k stars 866 forks source link

Works fine in React Native but doesn't work in ReactJS web #971

Closed Doko-Demo-Doa closed 5 years ago

Doko-Demo-Doa commented 5 years ago

Straight to the code. Mine is working well in React Native as I upgraded a long time ago. Recently I also use it in web version of the app, but no luck still.

The problem: Vanilla redux works well, and with debug: true I also see this log in console:

redux-persist/stateReconciler: rehydrated keys 'auth, cart, _persist'

But auth and cart object from store is always reseted to their initial state after refreshing.

This only happens in react web. In react native, it works well.

The Code:

custom-store.js

/**
 * @flow
 * Using redux-persist v5.
 */
import { createStore, applyMiddleware, compose } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { persistCombineReducers, persistStore } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'
import { rootReducer } from '../reducers/root-reducer'
import { rootSaga } from '../sagas/root-saga'

const sagaMiddleware = createSagaMiddleware()

// redux-persist v5 configuration:
const persistConfig = {
  key: 'app',
  storage,
  whitelist: ['auth', 'cart', 'common'],
  blacklist: ['nav', 'form'],
  stateReconciler: autoMergeLevel2,
  debug: true
}

// Reducer, persisted.
const reducers = persistCombineReducers(persistConfig, rootReducer)

export function configureStore (initialState) {
  const store = createStore(
    reducers,
    initialState,
    compose(applyMiddleware(sagaMiddleware))
  )
  sagaMiddleware.run(rootSaga)

  const persistor = persistStore(store, {}, () => {})

  return { persistor, store }
}

root-reducer.js

import { auth } from './auth'
import { cart } from './cart'

export const rootReducer = {
  auth,
  cart
}

cart.js (sample, I stripped some code)

import { remove } from 'lodash'
import { Types } from '../actions/types'

const INITIAL_STATE = []

export const cart = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case Types.ADD_PRODUCT_TO_CART:
      return newCart
    case Types.REMOVE_PRODUCT_FROM_CART:
      return remove(state.cart, (n) => n.productID === action.productId)
    default:
      return state
  }
}

root-reducer.js (Yes I'm aware of persistCombineReducer, so I made it as a plain js object here)

import { auth } from './auth'
import { cart } from './cart'

export const rootReducer = {
  auth,
  cart
}
meodemsao commented 5 years ago

I have same problem I found a thread in stackoverflow https://stackoverflow.com/questions/11545149/ios-web-app-has-different-localstorage-than-mobile-safari