CODEWITHSUNDEEP
reactjsreduxredux-saga
Ange
Ange

Reputation: 138

Redux Saga watcher not getting dispatched action

I'm trying to setup Redux-Saga in my create-react-app project. I'm following a tutorial but somehow the dispatched action is not triggering Redux-Saga watcher. It is a login functionality without integrating the API first (just wanted to wrap my head around how Redux-Saga works).

Here's a snippet of my login action

export const userLogin = (username) => ({
    type: USER_LOGIN,
    payload: {username},
});

Heres a copy of my loginSaga

import { take } from 'redux-saga/effects';
import { USER_LOGIN } from '../utils/constants';


function* handleUserLogin(action){
    console.log('action: ', action);
}

export default function* watchUserLogin(){
    yield take(USER_LOGIN, handleUserLogin);
}

Here's my rootSaga

import { all } from 'redux-saga/effects';

import loginSaga from '../components/Login/saga/loginSaga';

export default function* rootSaga() {
    yield all([loginSaga()]);
}

And here's how I'm applying it to the store

import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';

import rootSaga from '../sagas';

import rootReducer from '../reducers';

const configureStore = () => {
    const sagaMiddleware = createSagaMiddleware();
    const store = createStore(
        rootReducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ ?
            compose(
                applyMiddleware(sagaMiddleware),
                window.__REDUX_DEVTOOLS_EXTENSION__(),
            ) : applyMiddleware(sagaMiddleware),
    );
    sagaMiddleware.run(rootSaga);
    return store;
};

export default configureStore;

I'm not getting the console log on handleUserLogin(). Let me know if there is something I did wrong. Thanks!

Upvotes: 0

Views: 1845

Answers (2)

Woooong
Woooong

Reputation: 29

how about 'takeEvery'? 


import { takeEvery} from 'redux-saga/effects';

export default function* watchUserLogin() {

    yield takeEvery(USER_LOGIN, handleUserLogin);

}

Upvotes: 1

Clarity
Clarity

Reputation: 10873

You need to wrap your saga in while(true) to get it running. Otherwise it only waits for the first action and then ends the generator. Also you can use takeEvery or takeLatest instead.

export default function* watchUserLogin() {
  while (true) {
    yield take(USER_LOGIN, handleUserLogin);
  }
}

Upvotes: 3

Related Questions