使用React Router 4动态加载Redux Reducer

如何解决使用React Router 4动态加载Redux Reducer？

开发过程中遇到使用React Router 4动态加载Redux Reducer的问题如何解决？下面主要结合日常开发的经验，给出你关于使用React Router 4动态加载Redux Reducer的解决方法建议，希望对你解决使用React Router 4动态加载Redux Reducer有所启发或帮助；

问题描述

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

在您的文件中，添加一个名为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,
  });
}

然后，在您的文件中，

import createReducer from './reducers.Js';

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

现在，为了在安装 React容器时以异步方式注入reducer，您需要在容器中使用 injectReducer.js 函数，然后将所有reducer与connect一起组成。示例组件：

// 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的特定链接。

解决方法

我正在根据组件拆分代码，我只想在组件加载时注入我的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))
}

欢迎加入编程之家官方交流群！与上千程序员伙伴一起交流学习～

使用React Router 4动态加载Redux Reducer

如何解决使用React Router 4动态加载Redux Reducer？

问题描述

解决方法

编程问答问答