Reduxで複数の状態を対応するアクション作成者に接続する適切な方法は何ですか?そしてそれは良い考えですか?それが愚かな考えである場合、どうすればそれを回避できますか?
export default connect(
// which part of the Redux global state does
// our component want to receive as props?
(state) => {
return {
state: state.instagram
};
},
// which action creators does
// it want to receive by props?
(dispatch) => {
return {
actions: bindActionCreators(instagramActions, dispatch)
};
}
)(FeedContainer);
私が基本的に欲しいのは次のようなものです:
...
state: {state.instagram, state.facebook}
...
...
const mergedActions = {instagramActions, facebookActions};
actions: bindActionCreators(mergedActions , dispatch)
...
提供されているコールバックmapStateTopPropsおよびmapDispatchToPropsを使用することは、コンポーネントを状態のフィルタリングされたサブセットとすでにバインドされたactionCreatorsに接続する適切な方法です。
あなたが望むものを達成するためにあなたは単に行うことができます:
(state) => {
const { instagram, facebook } = state;
return {
state: { instagram, facebook }
};
}
そして
(dispatch) => {
return {
actions: bindActionCreators(Object.assign({}, instagramActions, facebookActions), dispatch)
};
}
これは動作しません:
actions: bindActionCreators({instagramActions, facebookActions} , dispatch)
メソッドはネストされたオブジェクトをまだサポートしていないため。 こちらのコードを参照 。キーを反復処理し、関数を検索するだけです。
MapDispatchToPropsコールバック内で、余分な状態レイヤーを残しておくことができます
(state) => {
const { instagram, facebook } = state;
return {
instagram,
facebook
};
}
これを行うと、次のようにして小道具にアクセスできます。
this.props.facebook
およびthis.props.instagram
の代わりに this.props.state.facebook
およびthis.props.state.instagram
。しかし、これは私が考えるスタイルの問題にすぎません。
状態をバインドして小道具にディスパッチする方法はいくつかあります。結局、それはスタイルの問題です。私はそれを行う方法のいくつかの異なる例を提供することができますが、公式ドキュメントを調べて独自のスタイルを見つける方がよい https://github.com/reactjs/react-redux/blob/master/docs/ api.md
または、それを簡単に行うことができます。
import * as todoActionCreators from './todoActionCreators'
import * as counterActionCreators from './counterActionCreators'
import { bindActionCreators } from 'redux'
function mapStateToProps(state) {
return { todos: state.todos }
}
function mapDispatchToProps(dispatch) {
return {
todoActions: bindActionCreators(todoActionCreators, dispatch),
counterActions: bindActionCreators(counterActionCreators, dispatch)
}
}
react-reduxのドキュメントに示されているとおり
これは古い質問であることはわかっていますが、他の誰かがthis.props
の単一のキー(私のような)にすべてのアクションをマッピングする場合は、ここに2セントを追加します。
受け入れられた回答に関するDavinTryonのコメントを拡張して、「mergedActions
」を達成する別の方法は、特にすべてのアクションに1つのキー(たとえば、actions
)を使用したい場合this.props.actions.[specificAction]
を使用して呼び出します。 connect
メソッドで行う必要があるのは次のとおりです。
export default connect(
(state) => {
return {
state: state.instagram
};
},
(dispatch) => {
return {
actions: bindActionCreators({...instagramActions, facebookActions}, dispatch)
};
}
)(FeedContainer);
メソッドを個別に宣言する場合(mapDispatchToProps
やmapStateToProps
などを使用)、次のようにmapDispatchToProps
を記述できます。
const mapDispatchToProps = dispatch => {
return {
actions: bindActionCreators({ ...instagramActions, facebookActions }, dispatch)
};
};
これにより、facebookActions
とinstagramActions
の両方のすべてのアクション作成者がthis.props.actions
にマッピングされます。