尝试实施 redux-persist 后,减速器消失了

Reducers are gone after attempting to implement redux-persist

我正在尝试实施 redux-persist 以仅保留特定的减速器、发票、版本,但就我而言,我的减速器都不见了。

这是入口点:

import React, { Component } from "react";
import { Provider } from "react-redux";
import { createStore, applyMiddleware, compose } from "redux";
import { persistStore, persistCombineReducers } from "redux-persist";
import { createWhitelistFilter } from "redux-persist-transform-filter";
import { PersistGate } from 'redux-persist/es/integration/react';
import storage from "redux-persist/lib/storage";
import thunkMiddleware from "redux-thunk";
import { apiMiddleware } from "redux-api-middleware";
import reducers from "./actions/reducers";
import AppContainer from "./containers/App";
import FlashMessage from "./containers/common/FlashMessage";
import "./App.css"

const middleware = [thunkMiddleware, apiMiddleware];

const persistConfig = {
  storage,
  key: 'root',
  transforms: [
    createWhitelistFilter('invoices')
  ]
};
const store = createStore(
  persistCombineReducers(persistConfig, reducers),
  compose(
    applyMiddleware(...middleware),
  )
);

const persistor = persistStore(store);

export default class App extends Component {
  render () {
    return (
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          {/*<FlashMessage/>*/} // Since there is no reducer, this fails
          <AppContainer/>
        </PersistGate>
      </Provider>
    )
  }
}

这是我的减速器文件:

import { combineReducers } from "redux";
import { routerReducer as router } from "react-router-redux";
import app from "./app";
import invoices from "./invoices/invoices";
import recipients from "./recipients/recipients";

export const makeRootReducer = (asyncReducers) => {
  return combineReducers({
    router,
    app,
    invoices,
    recipients,
    ...asyncReducers
  })
};

export const injectReducer = (store, { key, reducer }) => {
  store.asyncReducers[key] = reducer;
  store.replaceReducer(makeRootReducer(store.asyncReducers))
};

export default makeRootReducer;

我听从了很多建议,但我一定遗漏了一些东西。

我找到原因了。查看源码后,看到了如下persistCombineReducers的文档块:

/**
     * It provides a way of combining the reducers, replacing redux's @see combineReducers
     * @param config persistence configuration
     * @param reducers set of keyed functions mapping to the application state
     * @returns reducer
     */
    export function persistCombineReducers<S>(config: PersistConfig, reducers: ReducersMapObject): Reducer<S & PersistedState>;

关键字是"replacing redux's @see combineReducers"。

从我的 reducers 文件中删除 combineReducers 解决了问题:

import { routerReducer as router } from "react-router-redux";
import app from "./app";
import invoices from "./invoices/invoices";
import recipients from "./recipients/recipients";

const reducers = {
  router,
  app,
  invoices,
  recipients,
};

export default reducers;