Question

我有问题，希望您能帮助我。我做了redux的实现，并使用本地存储在重新加载页面时设法保留了数据。我可以从redux扩展名中看到它们。

为什么重新加载页面后的状态为其他格式？重新加载Map对象后，最初是JavaScript对象

问题在于重新加载页面后访问这些属性会丢失，或者说，它们以不同的方式出现。为了清楚起见，这是在不通过从组件制作console.log来重新加载页面的情况下看到属性的方式：

consolelog component before

这是重新加载页面后console.log的外观，这些属性包含在另一个名为nodes的属性中

consolelog component after

我的状态看起来都一样，而无需重新加载或重新加载页面：

store redux

加载和保存状态的实现如下：

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) {

  }
}

和我的configureStore看起来像这样：

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 ;
}

减速器：

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：

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

我认为可以是加载loadState（）的格式，但是我不明白为什么在redux扩展中看到的状态与不重新加载的状态完全相同。有什么建议或我该如何纠正？

Answer 1

问题是，当您最初在configureStore中加载状态时，您使用了 fromJS。默认情况下，POJO被转换为Map实例。

如果想要像POJO那样感觉的不可变对象，则需要决定如何存储数据，然后考虑使用Record。

如何访问redux状态的初始值？

1 个答案: