redux-saga関数内の状態/ストアから何かを取得するにはどうすればよいですか？

121

サガ関数内のredux状態にアクセスするにはどうすればよいですか？

短い答え：

import { select } from 'redux-saga/effects';
...
let data = yield select(stateSelectorFunction);

— アダム・タル
ソース

209

@markeriksonがすでに言っているように、を呼び出すためのredux-saga非常に便利なAPI select()を公開しますselectorているように、saga内でその一部を利用できるように状態します。

あなたの例では、簡単な実装は次のようになります：

/*
 * 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});
  }
}

@markeriksonによって提案されたドキュメントに加えて、D。Abramovによる非常に優れたビデオチュートリアルがあり、selectorsReduxでの使用方法を説明しています。Twitterのこの興味深いスレッドも確認してください。

— NickGnd
ソース

3

まさに私が欲しかったもの。私はそれを逃した私は信じられない

— Adam Tal

28

これが「セレクタ」関数の目的です。状態ツリー全体を渡すと、状態の一部が返されます。セレクターを呼び出すコードは、データがどこにあるかを知る必要はなく、返されただけです。いくつかの例については、http：//redux.js.org/docs/recipes/ComputingDerivedData.htmlを参照してください。

サガ内では、select()APIを使用してセレクターを実行できます。

— マーカー
ソース

受け入れられた回答の3.5時間前にこれがどのように書かれたかは興味深いですが、例を提供していないため、受け入れられませんでした。とにかくありがとう！

— Aleksandar

1

@キャスパー-同意する！しかし、それはここで質問にどれだけ速く答えるかではなく、あなたの答えがどれほど良いかについてです。答えはシンプルで読みやすいものにする必要があると思います。この答えはそれと一致せず、受け入れられた答えははるかに理解しやすかった。

— Adam Tal

@AdamTalはい、同意します:)

— Aleksandar

2

eventChannelを使用して、ジェネレーター関数内のコールバックからアクションをディスパッチしました

import {eventChannel} from 'redux-saga';
import {call, take} from 'redux-saga/effects';

function createEventChannel(setEmitter) {
    return eventChannel(emitter => {
        setEmitter(emitter)
        return () => {

        }
      }
    )
}

function* YourSaga(){
    let emitter;
    const internalEvents = yield call(createEventChannel, em => emitter = em)

    const scopedCallback = () => {
        emitter({type, payload})
    }

    while(true){
        const action = yield take(internalEvents)
        yield put(action)
    }
}

— yardenapp
ソース