Redux-Saga: Saga does not work sometimes on action dispatch

Asked
Active3 hr before
Viewed126 times

4 Answers

sometimesactiondispatchredux
90%

Vladimir Serykh just answered the question, but I didn't notice that until later.,Try to remove yield before takeLatest. It's not needed there because takeLatest is not a generator., 1 Try to remove yield before takeLatest. It's not needed there because takeLatest is not a generator. – Vladimir Serykh Apr 15 '20 at 16:34 ,Please be sure to answer the question. Provide details and share your research!

Vladimir Serykh just answered the question, but I didn't notice that until later.

Vladimir Serykh
88%

I have a saga to handle login, which will listen for LOGIN_REQUEST (state/auth/saga.js):,Now, I import this into a root file (state/rootSaga.js):,By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.,a point here: the login.log of loginSaga is executed when the app is rendered, but the console.log of the handleLogin function is not executed when the action is dispatched, which shows that the saga seems to be configured correctly but not running function after dispatch

function* handleLogin(action) {
   // ...

   console.log("handleLogin saga OK")

   try {
      // ...

   } catch (e) {
      // ...
   }
}

function* loginSaga() {
   console.log("loginsaga ok")
   yield takeLatest(LOGIN_REQUEST, handleLogin)
}

export {
   loginSaga,
}
load more v
72%

Make sure the Saga is not blocked on some effect. When a Saga is waiting for an Effect to resolve, it will not be able to take dispatched actions until the Effect is resolved.,As illustrated above, when a Saga is blocked on a blocking call then it will miss all the actions dispatched in-between.,My Saga is missing dispatched actions,Make sure that you yield the effects from the generator function.

App freezes after adding a saga#

Make sure that you yield the effects from the generator function.

yield
load more v
65%

You’ll see that whereas most of the above action creators each return a POJO, loadTakoyaki returns a function. This inner function, or thunk, which receives the Redux store’s method dispatch, is Redux Thunk’s “cue” to invoke the thunk. Otherwise, if the action creator returns a POJO, Redux Thunk simply ignores it, and the action object is processed by the reducer.,Note: Your choice of Redux middleware doesn’t need to be an either/or decision. It is absolutely possible to use both Redux Thunk and Redux-Saga. All you’d need to do is restore the `redux-thunk` import and include `thunk` in the middlewares array.,Both the watcher and worker Sagas are generator functions, which are denoted with an asterisk (*) beside the function keyword.,Note: This walkthrough assumes that you are using Redux for state management, with Redux Thunk as the middleware.

Using Redux Thunk, our actions file currently looks like this:

// actions/takoyaki.js (redux-thunk)import firehydrantAPI from 'helpers/firehydrantAPI';export const loadTakoyaki = data => dispatch => {  dispatch(loadTakoyakiRequest());  const path = 'takoyaki';  firehydrantAPI.get(path)    .then(response => dispatch(loadTakoyakiSuccess(response.data)))    .catch(dispatch(loadTakoyakiError));};export const LOAD_TAKOYAKI_REQUEST = 'LOAD_TAKOYAKI_REQUEST';export const loadTakoyakiRequest = () => ({  type: LOAD_TAKOYAKI_REQUEST,});export const LOAD_TAKOYAKI_SUCCESS = 'LOAD_TAKOYAKI_SUCCESS';export const loadTakoyakiSuccess = data => ({  type: LOAD_TAKOYAKI_SUCCESS,  data,});export const LOAD_TAKOYAKI_ERROR = 'LOAD_TAKOYAKI_ERROR';export const loadTakoyakiError = error => ({  type: LOAD_TAKOYAKI_ERROR,  error,});
load more v

Other "sometimes-action" queries related to "Redux-Saga: Saga does not work sometimes on action dispatch"