使用自己的减速器实现布局

时间:2017-01-16 16:56:46

标签: reactjs layout redux react-router react-redux

我有react-redux应用程序,我需要在布局中注入一些状态和reducer。我有路线 -

export const createRoutes = (store) => ({
path        : '/',
component   : CoreLayout,
indexRoute  : Index(store),
childRoutes : [
  ....
]

我的核心布局组件需要是一个组件,我不能像方法一样使用它,因为我遇到了错误。它无效 -

getComponent (nextState, cb) {
require.ensure([], (require) => {
  const Layout= require('./containers/CoreLayoutContainer').default;
  const reducer= require('../../modules/reducer').default;

  injectReducer(store, { key: 'layout', reducer})

  cb(null, Layout)
}, 'SongsList')

我最大的问题是,如果我尝试使用容器创建布局

const mapDispatchToProps = {
changePlaybackTime: (newTime) => changePlaybackTime(newTime),
}

const mapStateToProps = (state) => ({
    currentSongId: state.songs.player.currentSongId,
    isPaused : state.songs.player.isPaused,
    isPlaying: state.songs.player.isPlaying,
})


export default connect(mapStateToProps, mapDispatchToProps)(CoreLayout)

每次在mapStateToProps中我都会获得缩减器状态,我在当前路由的getComponent(nextState, cb)方法中定义了缩减器。如何将自己的减速器注入布局?感谢。

UPD:显示injectReducer函数:

import { combineReducers } from 'redux'

export const makeRootReducer = (asyncReducers) => {
   return combineReducers({
      //you can add global reducers here and got it everywhere
      ...asyncReducers
  })
}

 export const injectReducer = (store, { key, reducer }) => {
    if (Object.hasOwnProperty.call(store.asyncReducers, key)) return

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

1 个答案:

答案 0 :(得分:0)

因此,如果有人会强制执行这个问题 - 没有办法在布局中注入dynamyc reducer,但是如果你需要在应用程序的整个生命周期中使用任何reducer,你可以在全局注入该reducer。