reactjs – 使用反应样板正确设置redux-persist v5

2023年5月19日 257次阅读

我一直在尝试用
reactboilerplate 3.4.0框架设置
redux-persist 5.9.1.

我收到的错误似乎与redux-immutable有关,我无法找出正确的配置.

这是我到目前为止所做的：

1.安装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.在store.js中设置Redux Persist

//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')
  );
};

仍然没有运气：

错误：

我想我没有正确配置不可变映射.有帮助吗？

《reactjs – 使用反应样板正确设置redux-persist v5》

最佳答案 你做的方式是正确的
documentation.

问题出在这里：

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)

请参阅documentation,不要调用rootReducer获取触发器函数,而是将其作为变量传递.

点赞