如何解决使用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))
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。