Replicating the action on redux-thunk to redux-saga

106 views Asked by At

The following are my redux-saga generators

export function* toggleMenu(payload) {
let transitionDuration;
let { status } = payload;
if (!status) {
    transitionDuration = 500;
    yield put({ type:types.TOGGLE_MENU, status: 'transitioning' });
} else {
    transitionDuration = 0;
}
yield delay(transitionDuration);
yield put({ type:types.TOGGLE_MENU, status });

}

I am trying to replicate this function which I have it working previously on redux-thunk but I am trying to give redux-saga a go. Below are my redux-thunk function previously

export const toggleMenu = status => {
let transitionDuration;
return dispatch => {
    if (!status) {
        transitionDuration = 500;
        dispatch(menu('transitioning'));
    } else {
        transitionDuration = 0;
    }
    setTimeout(() => {
        dispatch(menu(status));
    }, transitionDuration);
};

};

The problem I am having now are redux-saga seems to cannot handle the task synchronously after dispatching 'transitioning' and then having another dispatch with same action within a delay. I have my task watched on takeEvery function. Thanks in advance!

1

There are 1 answers

0
Bryan Foong On

Ok I found the solution, I was watching the same action I was dispatching which got me into a loop. Change my action types into another and it works as expected.