Configuración correcta de redux-persist v5 con boilerplate reactivo - reactjs, redux, react-redux, redux-persist, redux-inmutable

He estado tratando de configurar redux-persist 5.9.1 con reactboilerplate 3.4.0 marco de referencia.

El error que recibo parece estar relacionado con redux-immutable y soy incapaz de averiguar la configuración correcta.

Esto es lo que he hecho hasta ahora:

1. Instale NPM

npm i -S redux-persist redux-persist-transform-immutable

package.json "redux-persist": "^5.9.1", "redux-persist-transform-immutable": "^5.0.0",

2. Configurar Redux Persistir en store.js

//store.js
import .... (other usual stuff)
import { persistStore, persistReducer  } from "redux-persist";
import storageSession from "redux-persist/lib/storage/session";
import immutableTransform from "redux-persist-transform-immutable";

const persistConfig = {
transforms: [immutableTransform()],
key: "root",
storage: storageSession,
}

const rootReducers = createReducer();

// Using persistReducer not persistCombineReducer because the rootReducer is already returned by combinedReducer from redux-immutable.
const persistedReducer = persistReducer (persistConfig, rootReducers)

export default function configureStore (initialState = {}, history) {
// other usual stuffs ...

// I modified how store is created using persistedReducer

const store = createStore(
persistedReducer, // this line used to use createReducer() method
fromJS(initialState),
composeEnhancers(...enhancers),
);

const persistor = persistStore(store);

return { persistor, store };

// Please note, I have commented out hot reloading of reducers for now.
}

3. No hay cambios en reducers.js

4. Actualizar App.js

import "babel-polyfill";
import React from "react";

// Added below
import { PersistGate } from "redux-persist/es/integration/react";

// other usual setup

// Line below used to define just store but now we are defining persistor and store
const { persistor, store } = configureStore(initialState, browserHistory);

// Finally, update the render method:

const render = () => {
ReactDOM.render(
<Provider store={store}>
<PersistGate persistor={persistor}>
<Router
history={history}
routes={rootRoute}
render={
applyRouterMiddleware(useScroll())
}
/>
</PersistGate>
</Provider>,
document.getElementById("app")
);
};

Y aún no hay suerte:

Error:

Creo que no tengo mapas inmutables bien configurados. ¿Alguna ayuda?

Respuestas

1 para la respuesta № 1

La forma en que lo haces es correcta como documentación.

El problema está aquí:

const rootReducers = createReducer();

// Using persistReducer not persistCombineReducer because the rootReducer is already returned by combinedReducer from redux-immutable.
const persistedReducer = persistReducer (persistConfig, rootReducers)

Esta const rootReducers = createReducer(); No debe llamar así, se activará la función. Deberias poner como const rootReducers = createReducer; o mejor llamen así:

const persistedReducer = persistReducer (persistConfig, createReducer)

Por favor mira documentaciónno llamar rootReducer Para la función de disparo pero pásala como variable.

---