142

How do I access the redux state inside a saga function?

Short answer:

import { select } from 'redux-saga/effects';
...
let data = yield select(stateSelectorFunction);
Lauri Harpf
  • 1,117
  • 8
  • 23
Adam Tal
  • 5,724
  • 4
  • 25
  • 48

3 Answers3

247

As @markerikson already says, redux-saga exposes a very useful API select() to invoke a selector on the state for getting some part of it available inside the saga.

For your example a simple implementation could be:

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

In addition to the suggested doc by @markerikson, there is a very good video tutorial by D. Abramov which explains how to use selectors with Redux. Check also this interesting thread on Twitter.

Shepmaster
  • 274,917
  • 47
  • 731
  • 969
NickGnd
  • 4,517
  • 1
  • 16
  • 25
35

This is what "selector" functions are for. You pass them the entire state tree, and they return some piece of the state. The code that calls the selector doesn't need to know where in the state that data was, just that it was returned. See http://redux.js.org/docs/recipes/ComputingDerivedData.html for some examples.

Within a saga, the select() API can be used to execute a selector.

Nathan Tuggy
  • 2,239
  • 27
  • 28
  • 36
markerikson
  • 42,022
  • 7
  • 87
  • 109
  • It's interesting how this was written 3.5 hours *before* the accepted answer, but it didn't provide an example, so it failed to get accepted. Thank You anyways! – Aleksandar Jun 27 '19 at 14:00
  • 1
    @Casper - I agree! But it's not about how fast you answer a question here but how good your answer is. I think answers must be kept simple and easy to read. This answer didn't match that and the accepted answer was much easier to understand. – Adam Tal Jul 16 '19 at 07:27
  • @AdamTal yes, I agree :) – Aleksandar Jul 17 '19 at 07:25
2

I used an eventChannel to dispatch an action from a callback within the generator function

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
  • 21
  • 1