Как передавать данные (payload) в redux-saga?

Question

[Ostic]

Здравствуйте.
Есть пример из оф. документации:

Код

export function* incrementAsync() {
  yield delay(1000)
  yield put({ type: 'INCREMENT' })
}
export function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync)
}

а как данные передавать? перехватить-то мы перехватываем и затем инициируем синхронный action, но как "нагрузку" получить и отправить?

Answer 1

[Антон Спирин]

Простой пример с запросом:

export function* fetchPostBySlugSaga({ payload: { slug } }) {
  try {
    const data = yield call(Api.fetchPostBySlug, slug);
    yield put(fetchPostBySlugSucceeded(data));
  } catch (error) {
    yield put(fetchPostBySlugFailed(error));
  }
}

export default function* watchFetchPostBySlugSaga() {
  yield takeLatest(FETCH_POST_BY_SLUG, fetchPostBySlugSaga);
}

Действия:

export function fetchPostBySlug(slug) {
  return {
    type: FETCH_POST_BY_SLUG,
    payload: {
      slug,
    },
  };
}

export function fetchPostBySlugSucceeded(data) {
  return {
    type: FETCH_POST_BY_SLUG_SUCCEEDED,
    payload: {
      data,
    },
  };
}

export function fetchPostBySlugFailded(error) {
  return {
    type: FETCH_POST_BY_SLUG_FAILED,
    payload: {
      error,
    },
  };
}

Comments

[Ostic]

это - то понятно...
вопрос в том, что её надо сначала получить от watchIncrementAsync(), чтобы потом передать в синхронный, а у нас

takeEvery('ACTION_ASYNC', actionAsync) // как здесь получить нагрузку, чтобы передать дальше?

[Антон Спирин]

Ostic, обновил ответ.

[Ostic]

Я вот так решил:
1. посмотрел, что

The result of yield take(pattern) is an action object being dispatched.

, те
const action = yield take('SEND_MSG_ASYNC')
2. Посмотрел, что

const takeEvery = (patternOrChannel, saga, ...args) => fork(function*() {
  while (true) {
    const action = yield take(patternOrChannel)
    yield fork(saga, ...args.concat(action))
  }
})

и сделал так

function* sendAsync(action) {
  yield delay(2000)
  yield put( { type: 'SEND_MSG', text: action.text } )
}

function* watchSendAsync() {
  while (true) {
    const action = yield take('SEND_MSG_ASYNC')
    yield fork(sendAsync, action) 
  }
}
const forkWatchSendAsync = ()=>fork(watchSendAsync)

export default function* rootSaga() {
  yield all([
    helloSaga(),
    forkWatchSendAsync()
  ])
}

пока как-то так )