如何访问 redux state 的初始值？

Question

I have a problem and I hope you can help me. I did a implementation of redux and using local storage I managed to keep the data when reloading the page. I can see them from the redux extension.

Why the state after reloading the page is in a different format? initially is a JavaScript object, after reloading a Map object

The problem is that accessing those properties after the page has been reloaded is lost or rather, they come in a different way. For clarity, this is how you see the properties without reloading the page by making a console.log from the component:

consolelog component before

and this is how looks the console.log after reloading the page, the properties are contained in another property called nodes

consolelog component after

My state looks the same both without reloading or reloading the page:

store redux

The implementation of load and save state is as follows:

import {fromJS} from 'immutable'

export const loadState = () => {
  try {
    const serializedData = localStorage.getItem('state')
    if (serializedData === null){
      return undefined 
    }
    return (JSON.parse(serializedData)) 
  } catch (error) {
    return undefined 
  }
}

export const saveState = (state) => {
  try {
    let serializedData = JSON.stringify(state.toJS())
    localStorage.setItem('state', serializedData)
  } catch (error) {

  }
}

and my configureStore looks like this:

import { createStore, applyMiddleware, compose } from 'redux';

import { fromJS } from 'immutable';
import { routerMiddleware } from 'connected-react-router/immutable';
import createSagaMiddleware from 'redux-saga';
import createReducer from './reducers';
import sagas from '../utils/sagas';

import {loadState, saveState} from '../storage/index'
const sagaMiddleware = createSagaMiddleware();


export default function configureStore(initialState ={}, history) {

  const middlewares = [sagaMiddleware, routerMiddleware(history)];

  const enhancers = [applyMiddleware(...middlewares)];
  const initialData = loadState();

  const composeEnhancers = process.env.NODE_ENV !== 'production'
    && typeof window === 'object'
    && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
          shouldHotReload: false,
        })
      : compose;
  /* eslint-enable */
  const store = createStore(

    createReducer(),
    fromJS(initialData),
    composeEnhancers(...enhancers),


  );
  store.subscribe(function(){
    saveState(store.getState())
  })

  // Extensions
  sagaMiddleware.run(sagas);
  store.injectedReducers = {}; // Reducer registry
  store.injectedSagas = {}; // Saga registry

  return store ;
}

Reducers:

import { reducer as form } from 'redux-form/immutable';

import { combineReducers } from 'redux-immutable';
//import { combineReducers } from 'redux'
import { connectRouter } from 'connected-react-router/immutable';
import history from 'utils/history';
import * as storage from 'redux-storage';

// Global Reducers
import languageProviderReducer from 'containers/LanguageProvider/reducer';
import authReducer from './modules/authReducer';
import uiReducer from './modules/uiReducer';
import initval from './modules/initFormReducer';
import adminReducer from './modules/adminReducer'

/**
 * Creates the main reducer with the dynamically injected ones
 */
export default function createReducer(injectedReducers = {}) {
  const rootReducer = storage.reducer(combineReducers({
    form,
    ui: uiReducer,
    initval,
    authReducer,
    adminReducer,

    router: connectRouter(history),
    ...injectedReducers,
  }));

  // Wrap the root reducer and return a new root reducer with router state
  const mergeWithRouterState = connectRouter(history);
  return mergeWithRouterState(rootReducer);
}

mapStateToProps in the component:

const mapStateToProps = state => ({
  state: state.get('authReducer','authReducer')
});

I think it can be the format in which the loadState() is loaded but I don't understand why in the redux extension you see the state exactly the same as without reloading. Any suggestions or how could I correct this?

Answer 1

The issue is when you initially load the state in configureStore , you use fromJS . By default, POJOs are converted to Map instances.

You need to decide how you want your data to be stored, if you want an immutable object that feels like a POJO then consider using a Record .