प्रतिक्रिया बॉयलरप्लेट के साथ रेडक्स-पर्सिस्ट वी 5 का सही सेटअप - रिस्पॉज, रेडक्स, रिएक्ट-रेडक्स, रेडक्स-पर्सिस्ट, रेडक्स-अपरिवर्तनीय

मैं सेटअप करने की कोशिश कर रहा हूं redux-persist 5.9.1 साथ में reactboilerplate 3.4.0 ढांचा।

मुझे प्राप्त होने वाली त्रुटि संबंधित से लगती है redux-immutable और मैं सही कॉन्फ़िगरेशन का पता लगाने में असमर्थ हूं।

यहाँ मैंने अभी तक क्या किया है:

1. एनपीएम स्थापित करें

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

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

2. सेटअप Redux Persist इन 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. reducers.js में कोई परिवर्तन नहीं

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

और फिर भी नसीब नहीं:

त्रुटि:

मुझे लगता है कि मेरे पास अपरिवर्तनीय नक्शे सही कॉन्फ़िगर नहीं हैं। कोई मदद?

उत्तर:

उत्तर № 1 के लिए 1

आप जिस तरह से कर रहे हैं वह सही है प्रलेखन.

समस्या यहाँ है:

const rootReducers = createReducer();

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

इस const rootReducers = createReducer(); इस तरह से कॉल नहीं करना चाहिए, यह फ़ंक्शन को ट्रिगर करेगा। आपको पसंद करना चाहिए const rootReducers = createReducer; या इस तरह से बेहतर कॉल:

const persistedReducer = persistReducer (persistConfig, createReducer)

कृपया देखें प्रलेखन, नहीं बुलाया rootReducer ट्रिगर फंक्शन के लिए लेकिन इसे वेरिएबल के रूप में पास करें।

---