使用 React Router 4 动态加载 Redux 减速器

我根据组件拆分代码，并且我想仅在组件加载时注入化简器，而不是从一开始就将它们全部堆叠在商店中。

在 React Router 3 中，它非常简单，但我似乎无法让它与 React Router 4 一起工作。

这是减速器和存储：

减速器.js

import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'

import modalReducer from '../modules/modal'

export default combineReducers({
  routing : routerReducer,
  modal   : modalReducer
})

store.js

import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './reducers'

export const history = createHistory()

const initialState = {}
const enhancers = []
const middleware = [
  thunk,
  routerMiddleware(history)
]

if (process.env.NODE_ENV === 'development') {
  const devToolsExtension = window.devToolsExtension

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension())
  }
}

const composedEnhancers = compose(
  applyMiddleware(...middleware),
  ...enhancers
)

const store = createStore(
  rootReducer(),
  initialState,
  composedEnhancers
)
export default store

我正在对路线使用延迟加载。

如何实现分体式减速器？

我想注入异步减速器，如下所示：

function createReducer(asyncReducers) {
  return combineReducers({
    ...asyncReducers,
    system,
    router,
  })
}

function injectReducer(store, { key, reducer }) {
  if (Reflect.has(store.asyncReducers, key)) return

  store.asyncReducers[key] = reducer
  store.replaceReducer(createReducer(store.asyncReducers))
}

In 反应路由器 v4，对于减速器的异步注入，请执行以下操作：

In your 减速器.js文件添加一个名为 createReducer 的函数，它将注入的Reducers 作为参数并返回组合的减速器：

/**
 * Creates the main reducer with the dynamically injected ones
 */
export default function createReducer(injectedReducers) {
  return combineReducers({
    route: routeReducer,
    modal: modalReducer,
    ...injectedReducers,
  });
} 

然后，在你的store.js file,

import createReducer from './reducers.js';

const store = createStore(
  createReducer(),
  initialState,
  composedEnhancers
);
store.injectedReducers = {}; // Reducer registry

现在，为了在安装反应容器时以异步方式注入减速器，您需要使用注入Reducer.js https://github.com/react-boilerplate/react-boilerplate/blob/master/app/utils/injectReducer.js在容器中运行，然后将所有减速器与连接组合起来。 示例组件Todo.js:

// example component 
import { connect } from 'react-redux';
import { compose } from 'redux';
import injectReducer from 'filepath/injectReducer';
import { addToDo, starToDo } from 'containers/Todo/reducer';

class Todo extends React.Component {
// your component code here
}
const withConnect = connect(mapStateToProps, mapDispatchToProps);

const addToDoReducer = injectReducer({
  key: 'todoList',
  reducer: addToDo,
});

const starToDoReducer = injectReducer({
  key: 'starredToDoList',
  reducer: starToDo,
});

export default compose(
  addToDoReducer,
  starToDoReducer,
  withConnect,
)(Todo);

React-样板 https://github.com/react-boilerplate/react-boilerplate是了解整个设置的绝佳来源。您可以在几秒钟内生成示例应用程序。 InjectReducer.js、configureStore.js（或在您的情况下是store.js）的代码以及实际上整个配置都可以从react-boilerplate中获取。具体链接可以在这里找到注入Reducer.js https://github.com/react-boilerplate/react-boilerplate/blob/master/app/utils/injectReducer.js, 配置Store.js https://github.com/react-boilerplate/react-boilerplate/blob/master/app/configureStore.js.