redux-saga 함수 내에서 상태 / 스토어에서 무언가를 얻는 방법은 무엇입니까?


122

saga 함수 내에서 redux 상태에 어떻게 액세스합니까?

짧은 답변:

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

답변:


210

@markerikson이 이미 말했듯이, redux-saga는 사가 내에서 일부를 사용할 수 있도록 상태 select()를 호출하는 데 매우 유용한 API 를 selector제공합니다.

예를 들어 간단한 구현은 다음과 같습니다.

/*
 * 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 이 제안한 문서 외에도 Redux와 함께 사용하는 방법을 설명하는 D. Abramov 의 매우 좋은 비디오 자습서 가 있습니다 selectors. Twitter 에서이 흥미로운 스레드를 확인하십시오 .


3
내가 원하는 정확히 무엇인지 .. 나는 그것을 놓친 보라 수 없습니다
아담 탈을

29

이것이 "선택기"기능의 용도입니다. 전체 상태 트리를 전달하고 상태의 일부를 반환합니다. 선택기를 호출하는 코드는 알 필요가없는 이 반환 단지, 데이터가 있었다 상태에서. 몇 가지 예는 http://redux.js.org/docs/recipes/ComputingDerivedData.html 을 참조하십시오 .

saga 내에서 select()API 를 사용하여 선택기를 실행할 수 있습니다.


이것이 답변이 받아 들여 지기 3.5 시간 전에 어떻게 쓰여 졌는지 흥미롭지 만 예제를 제공하지 않았기 때문에 받아 들여지지 못했습니다. 어쨌든 감사합니다!
Aleksandar

1
@Casper-동의합니다! 그러나 여기에서 질문에 얼마나 빨리 대답하는지가 아니라 대답이 얼마나 좋은지에 대한 것입니다. 답은 간단하고 읽기 쉽게해야한다고 생각합니다. 이 대답은 그것과 일치하지 않았고 받아 들여진 대답은 이해하기 훨씬 쉬웠습니다.
Adam Tal

@AdamTal 그래, 나는 :) 동의
알렉산다르

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)
    }
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.