使用React Router 4动态加载Redux Reducer

小编典典

使用React Router 4动态加载Redux Reducer

reactjs

我正在根据组件拆分代码，我只想在组件加载时注入我的reducer，而不是一开始就将它们堆叠在商店中。

在React Router 3中，这非常简单，但我似乎无法使其与React Router 4一起使用。

这是减速机和商店：

reducers.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))
}

阅读 373

2020-07-22

共1个答案

小编典典

在 react-router v4中 ，对于异步注入减速器，请执行以下操作：

在您的 reducer.js
文件中，添加一个名为createReducer的函数，该函数将InjectionReducers作为arg接收并返回组合的reducer：

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

然后，在您的 store.js 文件中，

import createReducer from './reducers.js';

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

现在，为了在安装React容器时以异步方式注入reducer，您需要在容器中使用injectReducer.js函数，然后将所有reducer与connect一起组成。示例组件
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-Boilerplate是了解整个设置的绝佳资源。您可以在几秒钟内生成示例应用程序。injectReducer.js，configureStore.js（或您的情况下的store.js）的代码以及实际上整个配置都可以从react-
boilerplate获取。可以在此处找到injectReducer.js和configureStore.js的特定链接。

2020-07-22