Redux: 有关具有多个reducer模块导入的功能CombineReducers的问题

创建于 2015-08-23  ·  9评论  ·  资料来源: reduxjs/redux

你好。

假设我们有一个如下所示的reducer文件:

export function something1 (state={}, action) {
  switch (action.type) {
    ...
  }
}

export function something2 (state={}, action) {
  switch (action.type) {
    ...
  }
}

还有3个其他类似的reducer文件具有多个导出。

尽管该文档仅提供了一个示例,说明如何仅使用具有多个导出功能的1个文件使用combineReducers- CombineReducers |

那么如何将函数与多个导入一起使用呢?

import * as reducers1 from './reducer1';
import * as reducers2 from './reducer2';
...

const reducer = combineReducers(???); // What argument to write. How to turn imports to object?

谢谢!

question

最有用的评论

导入_are_对象。 就像您要合并两个对象一样:

import * as reducers1 from './reducer1';
import * as reducers2 from './reducer2';

const allReducers = Object.assign({}, reducers1, reducers2);
const reducer = combineReducers(allReducers);

所有9条评论

导入_are_对象。 就像您要合并两个对象一样:

import * as reducers1 from './reducer1';
import * as reducers2 from './reducer2';

const allReducers = Object.assign({}, reducers1, reducers2);
const reducer = combineReducers(allReducers);

感谢您的快速回复; 没注意到ES6已经添加了这样的功能。 :+1:
我想知道是否值得在redux文档中添加这样的东西,以防其他人寻求?

@TheDeveloperXYZ

实际上,我们将从文档中删除import * ,仅显示原始示例,因为它使很多人感到困惑。 参见https://github.com/rackt/redux/pull/590。

感谢您的快速回复; 没注意到ES6已经添加了这样的功能。

如果您不想包含polyfill并且已经拥有Lodash或类似的东西,则可以使用Lodash的assign东西。 它只是合并对象。 没什么魔术。 :-)

@gaearon删除import *好主意。 我还建议您在首次使用它们时在注释中提及哪些解构语句和散布运算符。

可以多次通话combineReducers吗?
如果我在单独的文件中使用combineReducers ,然后又要附加一个reducer(实际上,它是routerReducerreact-router-redux ),可以这样做吗?
我不能使用扩展运算符( ...reducers, routing: routerReducer )的主要问题仅是暂存的ES6功能。

我不能使用扩展运算符(...还原器,路由:routerReducer)的主要问题仅是上演了ES6功能。

它只是贬低到Object.assign({}, reducers, { routing: routerReducer })Object.assign()是ES6的一部分,您可以为其使用polyfill。

您甚至可以手动编写一个合理的近似值:

let finalReducers = {}
Object.keys(reducers).forEach(key => finalReducers[key] = reducers[key])
finalReducers.routing = routerReducer

const reducer = combineReducer(finalReducers)

全部都是JavaScript!

感谢您的快速回复!
在问这个问题之前,我试图使用Object.assign()声明。 在那种情况下,在合并之前,我有rootReducer对象和属性default: function combination()正常工作。 但是在使用var reducer = Object.assign({}, rootReducer, { routing: routerReducer })我的变量reducer仅包含属性routing: function routerReducer()
combineReducer(finalReducers)返回了一个带有路由但没有我的应用精简器的函数。

我想我做错事了,但是我不知道到底是什么。

但是非常感谢您使用Object.keys

如果看到default表示您正在导入具有CommonJS require的ES模块。 这通常是一个错误。 请查看https://medium.com/@kentcdodds/misunderstanding -es6-modules-upgrading-babel-tears-and-a-solution-ad2d5ab93ce0以获得有关此信息。

如果您可以发布复制此项目的项目,那么我很乐意看一下。

我这样做是这样的:

mainReducer.js

import {combineReducers} from 'redux'
import {routerReducer} from 'react-router-redux'

// list of reducers
import registerReducer from 'registerReducer'
import homeReducer from 'homeReducer'
import aboutReducer from 'aboutReducer'
import contactUsReducer from 'contactUsReducer'


export const mapStateToProps = (state) => {
    return {
        register: state.register,
        home: state.home,
        about: state.about,
        contact:state.contact
    }
}
export default combineReducers({
    routing: routerReducer,
    register: registerReducer,
    home: homeReducer,
    about: aboutReducer,
    contact: contactUsReducer
})

那里有mapStateToProps函数。 原因是因为当我将其放置在其他文件中时,我经常忘记将条目添加到mapStateToProps函数。 所以我把它带到我的主减速器上,以便于使用。 打开多个文件来执行操作,Reducer确实很痛苦。

此页面是否有帮助?
0 / 5 - 0 等级