Redux: 関数combineReducersと複数のレデューサーモジュールのインポートに関する質問

作成日 2015年08月23日  ·  9コメント  ·  ソース: reduxjs/redux

こんにちは。

次のようなレデューサーファイルがあると想像してみましょう。

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

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

複数のエクスポートがある他の3つの同様のレデューサーファイルもあります。

このドキュメントは、複数のエクスポートを含む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_オブジェクトをインポートします。 2つのオブジェクトをマージするのと同じように:

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

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

全てのコメント9件

_are_オブジェクトをインポートします。 2つのオブジェクトをマージするのと同じように:

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がそのような機能を追加したことに気づきませんでした。

ポリフィルを含めたくない場合は、Lodashのassignのようなものを使用でき、すでにLodashなどがあります。 オブジェクトをマージするだけです。 魔法は何もない。 :-)

@gaearon import *を削除することをお勧めします。 また、最初に使用するときに、コメントで破壊ステートメントとスプレッド演算子について言及することをお勧めします。

combineReducersを複数回呼び出すことは可能ですか?
別のファイルでcombineReducersを使用していて、もう1つのレデューサーを添付したい場合(実際には、 routerReducerからreact-router-redux )、それは可能ですか?
スプレッド演算子( ...reducers, routing: routerReducer )を使用できないという主な問題は、ステージングされたES6機能のみです。

スプレッド演算子(...レデューサー、ルーティング:routerReducer)を使用できない主な問題は、ES6機能のみをステージングしました。

Object.assign({}, reducers, { routing: routerReducer })脱糖するだけです。 Object.assign()はES6の一部であり、ポリフィルを使用できます。

手作業で妥当な概算を書くこともできます。

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関数にエントリを追加するのを忘れがちだったためです。 だから私はそれを私のメインレデューサーに持ってきて、簡単にアクセスできるようにします。 複数のファイルを開いてアクションを実行すると、レデューサーは非常に面倒です。

このページは役に立ちましたか?
0 / 5 - 0 評価