Bir redux-saga işlevi içindeki state / store'dan bir şey nasıl alınır?

123

Bir saga işlevi içindeki redux durumuna nasıl erişebilirim?

Kısa cevap:

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

— Adam Tal
kaynak

211

@Markerikson zaten söylediği gibi redux-sagaçok kullanışlı bir API ortaya select()bir çağırmak için selectordestan içindeki mevcut bunun bir kısmını almak için durumuna.

Örneğiniz için basit bir uygulama şöyle olabilir:

/*
 * 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 tarafından önerilen dokümana ek olarak, D. Abramov tarafından Redux ile nasıl kullanılacağını açıklayan çok iyi bir video eğitimi varselectors . Twitter'daki bu ilginç konuya da bakın .

— NickGnd
kaynak

3

Tam olarak istediğim şey .. Onu özlediğime

— Adam Tal

30

"Seçici" işlevler bunun içindir. Onlara tüm eyalet ağacını geçirirsiniz ve devletin bir kısmını geri verirler. Seçiciyi çağıran kodun, verinin o durumda nerede olduğunu, sadece döndürüldüğünü bilmesine gerek yoktur . Bazı örnekler için http://redux.js.org/docs/recipes/ComputingDerivedData.html adresine bakın .

Bir destanda, select()API bir seçiciyi yürütmek için kullanılabilir.

— markerikson
kaynak

Bunun kabul edilen cevaptan 3,5 saat önce yazılması ilginç , ancak bir örnek sağlamadığı için kabul edilmedi. Yine de teşekkür ederim!

— Aleksandar

1

@Casper - Katılıyorum! Ancak burada bir soruya ne kadar hızlı cevap verdiğiniz değil, cevabınızın ne kadar iyi olduğu önemli. Bence cevaplar basit ve okunması kolay olmalı. Bu cevap onunla eşleşmedi ve kabul edilen cevabın anlaşılması çok daha kolaydı.

— Adam Tal

@AdamTal evet, katılıyorum :)

— Aleksandar

2

Oluşturucu işlevi içindeki bir geri aramadan bir eylem göndermek için bir eventChannel kullandım

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
kaynak