Sagas not starting up in time for early actions about redux-saga HOT 8 CLOSED

This is a weird side effect of using promises. I'm currently thinking of a consistent solution to this and other related issues (#50 && #34). Until it's fixed you can try this workaround used in the real world example

https://github.com/yelouafi/redux-saga/blob/master/examples/real-world/index.js#L15-L23

const store = configureStore()

requestAnimationFrame(() =>
  render(
    <Root
      store={store}
      history={history}
      routes={routes} />,
    document.getElementById('root')
  )
)

from redux-saga.

I had the same problem.

function *watchProfilesPage() {
  while (true) {
    console.log('listening for LOAD_PROFILES_PAGE actions');
    const { payload } = yield take(actions.LOAD_PROFILES_PAGE);
    console.log('LOAD_PROFILES_PAGE triggered');
  }
}

function *watchPaymentsPage() {
  while (true) {
    console.log('listening for LOAD_PAYMENTS_PAGE actions');
    const { payload } = yield take(actions.LOAD_PAYMENTS_PAGE);
    console.log('LOAD_PAYMENTS_PAGE triggered');
  }
}

export default function *root(getState) {
  yield fork(watchProfilesPage);
  yield fork(watchPaymentsPage);
}

In both my ProfilesContainer and PaymentsContainer I have componentWillMount where these actions are triggered:

// ProfilesContainer
componentWillMount() {
  console.log('trigger LOAD_PROFILES_PAGE');
  this.props.dispatch(loadProfilesPage(this.props.filters));
}

// PaymentsContainer
componentWillMount() {
  console.log('trigger LOAD_PAYMENTS_PAGE');
  this.props.dispatch(loadPaymentsPage(this.props.filters));
}

When my ProfilesContainer is active my console reads:

listening for LOAD_PROFILES_PAGE actions
trigger LOAD_PROFILES_PAGE
listening for LOAD_PAYMENTS_PAGE actions

The LOAD_PROFILES_PAGE action is successfully triggered and performed by the saga.

But when my PaymentsContainer is active my console reads:

listening for LOAD_PROFILES_PAGE actions
trigger LOAD_PAYMENTS_PAGE
listening for LOAD_PAYMENTS_PAGE actions

This time the seconds saga (LOAD_PAYMENTS_PAGE) is not listening on time to perform the LOAD_PAYMENTS_PAGE action.

I had to change the componentWillMount of my PaymentsContainer to wait a tick:

// PaymentsContainer
componentWillMount() {
  requestAnimationFrame(() => {
    console.log('trigger LOAD_PAYMENTS_PAGE');
    this.props.dispatch(loadPaymentsPage(this.props.filters));
  });
}

Console reads:

listening for LOAD_PROFILES_PAGE actions
listening for LOAD_PAYMENTS_PAGE actions
trigger LOAD_PAYMENTS_PAGE
LOAD_PAYMENTS_PAGE triggered

Edit. Thanks @yelouafi I will try to use the requestAnimationFrame on the render call for now.

from redux-saga.

@lvgunst Does the 2 containers load in the same time ?

from redux-saga.

No, these containers are route components. So only 1 container is active based on the active route. The thing is the second saga (watchPaymentsPage) is not listening when PaymentsContainer is triggering the action. Only the first registered saga (watchProfilesPage) is listening on time.

requestAnimationFrame solves this.

from redux-saga.

I had this issue as well, I ended up changing my root saga to yield an array and that took care of things. For the the example above, it'd be:

export default function *root(getState) {
  yield [
     fork(watchProfilesPage),
     fork(watchPaymentsPage)
  ]
}

from redux-saga.

Should be resolved by 0.6.0

from redux-saga.

did the new version solve the issue ?

from redux-saga.

Installed 0.6.0 and it seems to fix the problem. No need to use yield [] or requestAnimationFrame()

Thank you @yelouafi!

from redux-saga.