0

我正在尝试根据反应样板 4 将 redux-persist 添加到我的 Web 应用程序中。我已按照文档进行操作，但收到错误无法在状态树中找到路由器减速器，它必须安装在“路由器”下。

实施的更改：

在 configureStore.js

import { createStore, applyMiddleware, compose } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
import { routerMiddleware } from 'connected-react-router';
... Other imports...

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, createReducer);

export default function configureStore(initialState = {}, history) {

  ... Boilerplate code...

  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);

  const middlewares = [sagaMiddleware, routerMiddleware(history)];

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

  const store = createStore(
    persistedReducer,
    initialState,
    composeEnhancers(...enhancers),
  );

  const persistor = persistStore(store);

  ... Boilerplate code...

  return { store, persistor };
}

reducers.js 没有变化

在 app.js 中：

... Other imports...
import { PersistGate } from 'redux-persist/integration/react';
... Other imports...

const initialState = {};
const { store, persistor } = configureStore(initialState, history);
const MOUNT_NODE = document.getElementById('app');

const render = messages => {
  ReactDOM.render(
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <LanguageProvider messages={messages}>
          <ConnectedRouter history={history}>
            <App />
          </ConnectedRouter>
        </LanguageProvider>
      </PersistGate>
    </Provider>,
    MOUNT_NODE,
  );
};

...More code here...

我得到的完整错误是：

未捕获在状态树中找不到路由器减速器，它必须安装在“路由器”下

react-dom.development.js?61bb:17117 组件出现上述错误： in ConnectedRouter (created by Context.Consumer) in ConnectedRouterWithContext (created by ConnectFunction) in ConnectFunction in IntlProvider (created by LanguageProvider) in LanguageProvider (created by ConnectFunction ) 在 Provider 的 PersistGate 中的 ConnectFunction

考虑向树中添加错误边界以自​​定义错误处理行为。访问 fb.me/react-error-boundaries 以了解有关错误边界的更多信息。```

4

1 回答 1

1

这里的问题在于创建persistentReducer 的行。正确的方法是：

const persistedReducer = persistReducer(persistConfig, createReducer());

由于 reducers.js 导出了一个 funciona 并且 persistReducer 需要一个对象。

于 2019-07-22T14:29:25.773 回答