2016-11-22 18 views
2

私はReactとReduxを使用するプロジェクトを持っています。私は、Redux Storeからデータをスクラップしてリクエストオブジェクトを作成し、サーバーへの残りのリクエストを開始する一般的な方法を使用する必要がある複数のReactコンポーネントを持っています。適切な反応成分の使用

これを複数回行うメソッドを記述したくありません。ですから、このメソッドを自分のReactコンポーネントにするか、それを共通のjavascriptファイルに入れるべきですか?あなたがJSXをレンダリングしていないのであれば、コンポーネントを持っているのはどういうことでしょう。一方、一般的なjavascriptファイルに入れたら、そのファイルにreduxを接続して、ストア内の状態にアクセスすることは可能ですか?

ありがとうございます。

答えて

2

redux-thunkミドルウェアを追加すると、機能がディスパッチされ、dispatchgetState()にアクセスできます。そこから、セレクタ関数を使用して必要な状態を抽出し、AJAX呼び出しを行うなど、必要な操作を行うことができます。サンクアクションの作成者は、自動発送には、それらを結合などの小道具、などのコンポーネントに渡すことができます。

function someThunk() { 
    return (dispatch, getState) => { 
     const state = getState(); 

     // do anything you want here 
    } 
} 

const actions = {doStuffOnClick : someThunk}; 

export default connect(mapState, actions)(MyComponent); 

さらに資源:

+0

サンクは、Redux状態にアクセスする必要のある一般的なメソッドが必要なときにうまくいくと思われるとのことです。知るべき素晴らしい情報しかし、私の同僚は、私たちがこれでレンダリングできるJSXがあることを私に思い出させました。それは「送信」ボタンです。だから、私は*この事例ではコンポーネントは結局意味をなさないと思っています。 – nikotromus

1

あなたが言ったように、視覚的な側面がないため、これはコンポーネントであってはなりません。

これだけの新しいアクションを作成し、必要な場所からアクションをディスパッチします。このアクションは、アクションが既に発生しているかどうかを確認するためにストアをチェックし、何もしない(またはリフレッシュする)ことができます。

import {createStore} from 'redux'を使用しているモジュールがストアを作成します。作成したストアをアクションモジュールにインポートし、store.getState()を使用してストアの現在の状態を検査します。

関連する問題