jaysoo/example-redux-saga

Trying to integrate the example

Closed this issue · 1 comments

janhartmann commented

Hi.

I like the idea of this approach, but I am unable to integrate it in my application. I've been using a few hours now and can not spot the error.

When I dispatch LANGUAGE_START_CYCLE nothing happens. I would except my actions.cycleLanguage() to be triggered every 3 seconds.

Any idea what I am doing wrong? Thanks.

// constants/ActionTypes.js
export const LANGUAGE_SET_ACTIVE = "LANGUAGE_SET_ACTIVE";
export const LANGUAGE_START_CYCLE = "LANGUAGE_START_CYCLE";
export const LANGUAGE_STOP_CYCLE = "LANGUAGE_STOP_CYCLE";
export const LANGUAGE_CYCLE = "LANGUAGE_CYCLE";
// actions/language.js
export const setActiveLanguage = (language) => {
    return {
        type: ActionTypes.LANGUAGE_SET_ACTIVE,
        language: language
    }
};

export const cycleLanguage = () => {
    return {
        type: ActionTypes.LANGUAGE_CYCLE
    }
};
// languageSaga.js
import { actionChannel, call, take, put, race } from 'redux-saga/effects'
import * as ActionTypes from '../constants/ActionTypes';
import * as actions from '../actions/language';

const wait = ms => {
    new Promise(resolve => {
        setTimeout(() => resolve(), ms)
    })
};

export default function * languageSaga() {
    const channel = yield actionChannel(ActionTypes.LANGUAGE_START_CYCLE);
    while (yield take(channel)) {
        while (true) {
            const { stopped } = yield race({
                wait: call(wait, 3000),
                stopped: take(ActionTypes.LANGUAGE_STOP_CYCLE)
            });

            if (!stopped) {
                yield put(actions.cycleLanguage());
            } else {
                break;
            }
        }
    }
}
// sagas.js (root sagas)
export default function * sagas() {
    yield [
        directorySaga(), // Another saga which works fine
        pusherSaga(), // Another saga which works fine
        languageSaga()
    ]
}

Example of one of my other sagas, which are working:

// directorySaga.js
function * fetchDirectory(action) {
    try {
        const directory = yield call(Api.fetchDirectory, action.id);
        yield put(fetchDirectorySucceeded(directory));
    } catch (e) {
        yield put(fetchDirectoryFailed(e.message));
    }
}

export default function * directorySaga() {
    yield * takeLatest(ActionTypes.DIRECTORY_REQUESTED, fetchDirectory);
}