web-dev-qa-db-ja.com

複数のアクション/状態を持つRedux connect（）

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)
...
reactjsconnectreduxredux-framework
14
Livioso

提供されているコールバック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

17
larrydahooster

または、それを簡単に行うことができます。

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のドキュメントに示されているとおり

2
Phill

これは古い質問であることはわかっていますが、他の誰かが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にマッピングされます。

1
Ishita Sinha