Question

我正在实现redux-storage。我的配置是这样的：

import { createStore, applyMiddleware, compose } from 'redux';
import * as storage from 'redux-storage';
import createEngine from 'redux-storage-engine-localstorage';
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 { saveState, loadState } from '../storage';

const sagaMiddleware = createSagaMiddleware();

const engine = createEngine('my-save-key');
const middlewareLocal = storage.createMiddleware(engine);


export default function configureStore(initialState ={}, history) {
  // Create the store with two middlewares
  // 1. sagaMiddleware: Makes redux-sagas work
  // 2. routerMiddleware: Syncs the location/URL path to the state
  const middlewares = [middlewareLocal,sagaMiddleware, routerMiddleware(history)];

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

  // If Redux DevTools Extension is installed use it, otherwise use Redux compose
  /* eslint-disable no-underscore-dangle, indent */
  const composeEnhancers = process.env.NODE_ENV !== 'production'
    && typeof window === 'object'
    && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
          // Prevent recomputing reducers for `replaceReducer`
          shouldHotReload: false,
        })
      : compose;
  /* eslint-enable */
  const store = createStore(
    createReducer(),
    fromJS(initialState),
    composeEnhancers(...enhancers),
  );

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


  // Make reducers hot reloadable, see http://mxs.is/googmo
  /* istanbul ignore next */
  if (module.hot) {
    module.hot.accept('./reducers', () => {
      store.replaceReducer(createReducer(store.injectedReducers));
    });
  }

  return(store);
}

我的减速器看起来像这样：

import { fromJS, Map } from 'immutable';
import {
  INIT, CLEAR, CREATE_PAIS, CREATE_CIUDAD, CREATE_PROPIEDAD, RESULTADO, DEFAULT_MESSAGE, ELIMINAR_PAIS, ELIMINAR_CIUDAD, ELIMINAR_PROPIEDAD, ELIMINAR_ADMINISTRADOR,
  TOKEN_EXPIRED, LISTAR_PAISES_SUCCESS, LISTAR_CIUDADES_SUCCESS, LISTAR_PROPIEDADES_SUCCESS,
  LISTAR_PAISES, LISTAR_ADMINISTRADORES_SUCCESS, CREATE_PAIS_SUCCESS,
  CREATE_ADMINISTRADOR_SUCCESS, CREATE_PROPIEDAD_SUCCESS,
  CREATE_CIUDAD_SUCCESS, ELIMINAR_OBJETO, ELIMINAR_OBJETO_PAIS,
  ELIMINAR_OBJETO_PROPIEDAD, ELIMINAR_OBJETO_ADMINISTRADOR, CREATE_ADMINISTRADOR, LISTAR_CIUDADES_ACTIVAS_SUCCESS,
  ELIMINAR_PROPIEDAD_ALERT, ELIMINAR_PROPIEDAD_ALERT_CLOSE,  LISTAR_CIUDADES, LISTAR_ADMINISTRADORES, LISTAR_PROPIEDADES
} from '../constants/reduxFormConstants';

const initialState = {
  formValues: Map(),
  message: '',
  existMessage: false,
  numPaises: 0,
  numCiudades: 0,
  numPropiedades:0,
  numAdministradores:0,
  loading: false,
  tipo: '',
  alert:false,
};

const initialImmutableState = fromJS(initialState);
export default function reducer(state = initialImmutableState, action = {}) {
  switch (action.type) {
    case INIT:
      return state.withMutations((mutableState) => {
        mutableState.set('formValues', action.data);
      });
    case CLEAR:
      return state.withMutations((mutableState) => {
        mutableState.set('formValues', []);
      });
    case ELIMINAR_OBJETO:
      return {
        ...state,
        ciudades: { data: action.ciudades, status: 200 }
      }
    case ELIMINAR_OBJETO_PAIS:
      return {
        ...state,
        paises: { data: action.paises, status: 200 }
      }
    case ELIMINAR_OBJETO_PROPIEDAD:
      return {
        ...state,
        propiedades: { data: action.propiedades, status: 200 }
      }
    case ELIMINAR_OBJETO_ADMINISTRADOR:
      return {
        ...state,
        administradores: { data: action.administradores, status: 200 }
      }
    case CREATE_PAIS:
      return {
        ...state,
        loading: true,
        pais: action.nombre
      };
    case CREATE_CIUDAD:
      return {
        ...state,
        loading: true,
        ciudad: action.nombre
      };
    case CREATE_PROPIEDAD:
      return {
        ...state,
        loading: true,
        propiedad: action.nombre
      };
    case CREATE_ADMINISTRADOR:
      return {
        ...state,
        loading: true,
        administrador: action.nombre
      };
    case RESULTADO:
      return {
        ...state,
        message: action.message,
        info: action.info,
        tipo: action.tipo,
        existMessage: true,

      };
    case TOKEN_EXPIRED:
      return {
        ...state,
        messagetoken: action.message,
      };
    case DEFAULT_MESSAGE:
      return {
        ...state,
        message: '',
        info: '',
        existMessage: false,
        tipo: ''
      };
    case ELIMINAR_PAIS:
      return {
        ...state,
        paisEliminado: true,
      };
    case ELIMINAR_CIUDAD:
      return {
        ...state,
        ciudadEliminada: true,
      };
    case ELIMINAR_PROPIEDAD:
      return {
        ...state,
        ciudadEliminada: true,
      };
    case ELIMINAR_ADMINISTRADOR:
      return {
        ...state,
        paisEliminado: true,
      };
      case LISTAR_CIUDADES:
      return{
        ...state,
        numCiudades:0,
      } 
      case LISTAR_PROPIEDADES:
      return{
        ...state,
        numPropiedades:0
      } 
      case LISTAR_ADMINISTRADORES:
      return{
        ...state,
        numAdministradores:0
      }  
    case LISTAR_PAISES:
      return {
        ...state,
        numPaises: 0
      }
    case LISTAR_PAISES_SUCCESS:
      return {
        ...state,
        paises: { data: action.paises, status: action.status },
        numPaises: action.paises.length
      }
    case LISTAR_CIUDADES_SUCCESS:
      return {
        ...state,
        ciudades: { data: action.ciudades, status: action.status },
        numCiudades: action.ciudades.length
      }
    case LISTAR_CIUDADES_ACTIVAS_SUCCESS:
      return {
        ...state,
        ciudadesActivas: { data: action.ciudades, status: action.status },
      }
    case LISTAR_PROPIEDADES_SUCCESS:
      return {
        ...state,
        propiedades: { data: action.propiedades, status: action.status },
        numPropiedades: action.propiedades.length

      }
    case LISTAR_ADMINISTRADORES_SUCCESS:
      return {
        ...state,
        administradores: { data: action.administradores, status: action.status },
        numAdministradores:action.administradores.length

      }
    case CREATE_ADMINISTRADOR_SUCCESS:
    case CREATE_PROPIEDAD_SUCCESS:
    case CREATE_PAIS_SUCCESS:
    case CREATE_CIUDAD_SUCCESS:
      return {
        ...state,
        formValues: Map(),
        loading: false,
      }

    case ELIMINAR_PROPIEDAD_ALERT:
      return{
          ...state,
          alert: true,
          idProp: action.id
      } 
    case ELIMINAR_PROPIEDAD_ALERT_CLOSE:
      return{
        ...state,
        alert:false,
        idProp:null
      }  
    default:
      return state;
  }
}

问题在于，当执行重新加载时，执行存储保存操作。但是让我保持减速器的初始状态。这是怎么回事？

我上传了此屏幕截图，以清楚说明正在发生的事情 1.充电前说明 2.充电后的状态

1 2

Answer 1

查看文档，您没有加载数据，需要将示例的其余部分添加到代码中

// At this stage the whole system is in place and every action will trigger
// a save operation.
//
// BUT (!) an existing old state HAS NOT been restored yet! It's up to you to
// decide when this should happen. Most of the times you can/should do this
// right after the store object has been created.

// To load the previous state we create a loader function with our prepared
// engine. The result is a function that can be used on any store object you
// have at hand :)
const load = storage.createLoader(engine);
load(store);

// Notice that our load function will return a promise that can also be used
// to respond to the restore event.
load(store)
    .then((newState) => console.log('Loaded state:', newState))
    .catch(() => console.log('Failed to load previous state'));

Redux-storage不保存最后执行的操作

1 个答案: