使用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.jsconfigureStore.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))
}

编程问答问答

在 CSS 中设置 cellpadding 和 cellspacing?
如何在 Java 中创建内存泄漏?
浮点数被破坏了吗?
按字符串属性值对对象数组进行排序
如何加快Android模拟器的速度?
如何舍入至多 2 位小数?
使用 Git 版本控制查看文件的更改历史记录
如何在 JavaScript 中检查空/未定义/空字符串?
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注