2016-06-12 17 views
29

サガ機能の中でredux状態にアクセスするにはどうすればよいですか?redux-saga関数内の状態/ストアから何かを取得するには?

私の問題

私は、次の部分からなるアプリケーションを持っている:

  TOOLBAR   
--------------------------------- 
User info  | Current Project 

各部分がそれ自身の減速、佐賀、アクションや状態によって異なるコンポーネントです。

ツールバーには、「SAVE_PROJECT」アクションタイプをディスパッチする保存ボタンがあります。問題は、ツールバーがプロジェクトを知ることを望んでいないということです(それはもっと責任があり、タイプのアクションをディスパッチしたいだけです)。

私は「SAVE_PROJECT」に耳を傾けプロジェクト関連の武勇伝を持っている:

... 
export function* saveProjectTask() { 
    while(true) { 
    yield take(SAVE_PROJECT); 
    let project = /* THIS IS THE PROBLEM, I DON'T HAVE THE PROJECT */; 
    yield call(fetch, '/api/project', { body: project, method: 'PUT' }); 
    yield put({type: SAVE_PROJECT_SUCCESS}); 
    } 
} 

私は佐賀の内側にReduxの状態からプロジェクトを取得することはできません。

私はcurrenプロジェクトレデューサーの中の "SAVE_PROJECT"イベントを聞くことができないと思うし、レデューサーの中でプロジェクトを取得し、プロジェクトと別のアクションをディスパッチします。

私のツールバーが状態ツリー全体を知り、すべてのアクションのアクションに関連するものを送信することは本当にありません。

どのように私はそれを佐賀に渡すことができますか?または、国の関連する部分だけ?

答えて

74

は、redux-sagaはサガ内部で利用可能な、それの一部を取得するための状態にselectorを呼び出すために非常に便利なAPI select()を公開しています。

単純な実装は可能性があなたの例:

/* 
* Selector. The query depends by the state shape 
*/ 
export const getProject = (state) => state.project 

// Saga 
export function* saveProjectTask() { 
    while(true) { 
    yield take(SAVE_PROJECT); 
    let project = yield select(getProject); // <-- get the project 
    yield call(fetch, '/api/project', { body: project, method: 'PUT' }); 
    yield put({type: SAVE_PROJECT_SUCCESS}); 
    } 
} 

提案docに加えて@markeriksonによって、非常に良いvideo tutorialはReduxのでselectorsを使用する方法について説明D.アブラモフであります。 Twitterでもthis興味深いスレッドをチェックしてください。

+2

まさに私が望んでいたもの..私はそれを逃したと信じられない –

9

これは「セレクタ」機能のためのものです。それらを状態ツリー全体に渡し、状態の一部を返します。セレクタを呼び出すコードは、を知る必要はありません。ここでは、データが返された状態のの状態です。いくつかの例については、http://redux.js.org/docs/recipes/ComputingDerivedData.htmlを参照してください。

サガ内では、select() APIを使用してセレクタを実行できます。 @markeriksonはすでに言うよう

関連する問題