2017-09-28 8 views
0

ウェブ全体私は、connectの機能からに渡されたコードをreact-reduxから直接コンポーネントにディスパッチしています。私の質問は、単にアクションオブジェクトをコンポーネントに戻してそこからディスパッチするのではなく、アクションファイルから直接ディスパッチするのではないのですか?私はここで何かを逃しているように感じる。そのようなコンポーネントから直接ディスパッチするのはちょっと間違っているように感じます。単に関数を呼び出して必要なものを渡し、アクション作成者に反応コンポーネント以外のディスパッチをさせてもらうことができます。アクションファイルの代わりにコンポーネントでディスパッチするのはなぜですか?

は、ここで私が何を意味するかの簡単な例です:https://gist.github.com/overthemike/5481dab563c7f97f4151ab1c8c9cb4f1

私は何をしないのですか?

答えて

2

これは本当にその方法の1つです。あなたが好きなものを選択して、あなたのコードスタイルに合ったものにしてください。

彼らは道私が一番好きなのES6で、このようなものです:mapDispatchToPropsのための簡略表記を使用することにより

import { actionA, actionB } from 'path/to/redux/actions' 

class MyComponent extends React.Component { ... } 

const mapStateToPros = {...} 
const mapDispatchToProps = { actionA, actionB } 
export default connect(mapStateToPros, mapDispatchToProps)(MyComponent) 

MyComponentは小道具として機能actionAactionBを受け取り、this.props.actionAで呼び出すことができます。 const mapDispatchToProps = { actionA, actionB }は次のようにreduxによって解釈されます。

const mapDispatchToProps = (dispatch) => { 
    return { 
    actionA: (...args) => {dispatch(actionA(...args))}, 
    actionB: ..., 
    } 
} 

だから、実際にあなたが確かに接続されたコンポーネントに直接this.props.dispatch()を呼び出すことができますdispatch(actionA())

+0

唯一の問題は、(構文が本当にいいです)というのは、アクションオブジェクトがプレーンなJavaScriptオブジェクトを返すだけで、ディスパッチが起こっているという意味でexplicitnessが不足しているようです(特に新人にとって)舞台裏でコードに従おうとすると、実際にあなたを減速機に連れて行くことは決してありません。 –

2

を呼び出しているthis.props.actionA()を呼び出します。しかし、私は自分のReactコンポーネントがdispatchを直接参照せず、他の関数をpropsとして呼び出すことによって、Reduxの "未知"のコンポーネントを保つことを好みます。この方法では、コンポーネントがバインドされたReduxアクション作成者、親からのコールバック、またはテスト中のモック関数であったかどうかは、コンポーネントが認識または気にしません。

@cfraserが言っているように、アクションクリエータをconnectに渡すための「オブジェクト短縮形」構文を使用することを強くお勧めします。

私の投稿Idiomatic Redux: Why Use Action Creators?に興味があるかもしれませんが、詳細はこのトピックを参照してください。

トレーサビリティについてのあなたのコメントごとに、コンポーネントに渡されるアクションクリエイター、アクションクリエータ定義、アクションタイプ、そのアクションタイプに応答するレデューサーに戻ることになります。

関連する問題