Správne nastavenie redux-persist v5 s reaktívnym kotlom - reakjs, redux, reak-redux, redux-persist, redux-immutable

Snažil som sa nastaviť redux-persist 5.9.1 s reactboilerplate 3.4.0 rámec.

Zdá sa, že chyba, ktorú dostávam, súvisí redux-immutable a nedokážem zistiť správnu konfiguráciu.

Tu je to, čo som urobil zatiaľ:

1. Nainštalujte 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. Nastavenie Redux pretrváva v 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. Žiadna zmena v reduktoroch.js

4. Aktualizujte 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")
);
};

A stále nemá šťastie:

Chyba:

Myslím, že nemám nakonfigurované nemenné mapy. Nejaká pomoc?

odpovede:

1 pre odpoveď č. 1

Spôsob, akým robíte, je správny dokumentácia.

Problém je tu:

const rootReducers = createReducer();

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

toto const rootReducers = createReducer(); by nemal takto volať, spustí funkciu. Mali by ste to povedať const rootReducers = createReducer; alebo lepšie zavolať takto:

const persistedReducer = persistReducer (persistConfig, createReducer)

Prosím pozri dokumentácia, nevolajte rootReducer pre spúšťaciu funkciu, ale odovzdajte ju ako premennú.

---