React Native redux saga yield not working on first action

Question

I am using redux saga in my React Native app. It all works except for one thing. For one of my actions when it is dispatched the first time, it stops at 'const newUserLogAction = yield take('CREATE_USER_LOG')' in the code below. So the console log 'saga callCreateUserLog take' is not printed, nothing happens. But if I dispatch the same action again, it works. I have other actions and they all work fine the first time.

saga file:

function * createUserLog () {
  yield takeEvery('CREATE_USER_LOG', callCreateUserLog)
}

export function * callCreateUserLog () {
  try {
    console.log('saga callCreateUserLog start')
    const newUserLogAction = yield take('CREATE_USER_LOG')
    console.log('saga callCreateUserLog take')
    console.log('newUserLogAction' + FJSON.plain(newUserLogAction))
    const data = newUserLogAction.data
    const newUserLog = yield call(api.createUserLog, data)
    yield put({type: 'CREATE_USER_LOG_SUCCEEDED', newUserLog: newUserLog})
  } catch (error) {
    yield put({type: 'CREATE_USER_LOG_FAILED', error})
  }
}

action file:

export const createUserLog = (data) => {
  console.log('action create user log data = ' + FJSON.plain(data))
  return ({
    type: 'CREATE_USER_LOG',
    data}
  )
}

Even on the first dispatch, the data is printed correctly here, so the payload is correct.

react native functions doing the dispatching:

clickContinue = () => {
    var event = {
      'userId': this.props.user.id,
      'eventDetails': {
        'event': 'Agreed to the ISA Declaration'
      }
    }
    this.props.dispatch(createUserLog(event))
  }

Yury Tarabanko Yury Tarabanko · Accepted Answer · 2018-07-16T09:19:25

You don't need to use take effect. Action object will be passed by takeEvery.

export function * callCreateUserLog (newUserLogAction) {
  try {
    console.log('saga callCreateUserLog start')
    console.log('newUserLogAction' + FJSON.plain(newUserLogAction))
    const data = newUserLogAction.data
    const newUserLog = yield call(api.createUserLog, data)
    yield put({type: 'CREATE_USER_LOG_SUCCEEDED', newUserLog: newUserLog})
  } catch (error) {
    yield put({type: 'CREATE_USER_LOG_FAILED', error})
  }
}

React Native redux saga yield not working on first action

1 Answers