React Redux Refresh issue

Question

I am using react-redux and I am having a issue where I loose my redux state when the page is refreshed.

Now before I go further on that this is the scenario, which I may be messing up.

Question one: Can I connect to more than one layout?

I have a dashboard and a "app" layout. Both have separate layouts. I connect both in the same manner:

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/actionCreators';

function mapStateToProps(state) {
  return {
    profile: state.profile,
    child: state.child,
  }
}

function mapDispachToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch);
}

const LayoutApp = connect(mapStateToProps, mapDispachToProps)      (DashboardLayout);

export default LayoutApp;

The dashboard connects just fine. I am able to hit reducers when i need to and update the store, however the dashboard links to the app for certain parts of data manipulation for you to play with. When it links I get the data in props as expected, however as soon as any page refreshes within the app layouts I loose the props being sent by maptoprops.

I have tried to combine into one master layout however that seems to have the same affect. I have also tried to save to state immediately when i first receive data but that seems to be lost as well upon refresh which makes me think it is resetting it.

Summary: - DashboardLayout (connects to redux) - AppLayout (connects to redux) however after a page refresh it looses props to the Applayout and needed data is gone.

Answer 1

Get to know redux-persist

https://github.com/rt2zz/redux-persist

You can install it using

npm i --save redux-persist

persistStore is the function that allows you to persist store.

import {persistStore} from 'redux-persist'

and autoRehydrate is the action that is performed whenever the state needs to be rehydrated

import {autoRehydrate} from 'redux-persist'

following is the structure that may be useful.

import {compose, applyMiddleware, createStore} from 'redux'
import {persistStore, autoRehydrate} from 'redux-persist'

// add `autoRehydrate` as an enhancer to your store (note:  `autoRehydrate` is not a middleware)
const store = createStore(
     reducer,
     undefined,
     compose(
        applyMiddleware(...),
        autoRehydrate()
     )
)

// begin periodically persisting the store
persistStore(store)

and then for your reducer

 import {REHYDRATE} from 'redux-persist/constants'
 //...
 case REHYDRATE:
   var incoming = action.payload.myReducer
   if (incoming) return {...state, ...incoming, specialKey: 
       processSpecial(incoming.specialKey)}
   return state

following are the methods which can be used to work out of redux-persist

   persistor.pause() - pauses redux persist
   persistor.resume() - resumes redux persist
   persistor.purge() - deletes all persisted data
   persistor.rehydrate() - calls reducer to rehydrate store

types of storage redux persist allows

// sessionStorage
import { persistStore } from 'redux-persist'
import { asyncSessionStorage } from 'redux-persist/storages'    
persistStore(store, {storage: asyncSessionStorage})

// react-native
import {AsyncStorage} from 'react-native'
persistStore(store, {storage: AsyncStorage})

// web with recommended localForage
import localForage from 'localforage'
persistStore(store, {storage: localForage})

it is the most basic use redux-persist hope it helps.

Answer 2

I had this problem, so as somebody mentioned here, i used the localStorage.

In my reducer, i did like this:

const exampleKey = "_exampleKey"

const INITIAL_STATE = {
    example: JSON.parse(localStorage.getItem(exampleKey))
};

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case 'SET_TRUE':
            localStorage.setItem( exampleKey, JSON.stringify(true));
            return { ...state, example: true  };
        case 'SET_FALSE':
            localStorage.setItem( exampleKey, JSON.stringify(false));
            return { ...state, example: false};
        default:
            return state
}

Pointing INITIAL_VALUES.example to localStorage's item example ensure us to keep the correct value when the page reloads.

Hope it helps somebody.