こんにちは。
次のようなレデューサーファイルがあると想像してみましょう。
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?
ありがとう!
_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関数にエントリを追加するのを忘れがちだったためです。 だから私はそれを私のメインレデューサーに持ってきて、簡単にアクセスできるようにします。 複数のファイルを開いてアクションを実行すると、レデューサーは非常に面倒です。
最も参考になるコメント
_are_オブジェクトをインポートします。 2つのオブジェクトをマージするのと同じように: