Как получить обратные вызовы в Redux-Saga?

Сценарий: я хочу перенаправить пользователя или показать предупреждение на основе успеха, обратные вызовы ошибок после отправки действия.

Ниже приведен код с сокращением для задачи

this.props.actions.login(credentials)
.then((success)=>redirectToHomePage)
.catch((error)=>alertError);

потому что действие отправки в redux-thunk возвращает Promise, легко реагировать с ответом.

Но теперь я получаю свои руки грязными на саунд-редуксе и пытаюсь выяснить, как я могу достичь того же результата, что и код выше. поскольку Saga работает в другом потоке, я не могу получить обратный вызов из запроса выше. поэтому я просто хотел узнать, как вы, ребята, это делаете. или как лучше всего справиться с обратными вызовами при использовании саги саги? действие отправки выглядит следующим образом:

this.props.actions.login(учетные данные);

и сага

function* login(action) {
  try {
    const state = yield select();
    const token = state.authReducer.token;
    const response = yield call(API.login,action.params,token);
    yield put({type: ACTION_TYPES.LOGIN_SUCCESS, payload:response.data});
    yield call(setItem,AUTH_STORAGE_KEY,response.data.api_token);
  } catch (error) {
    yield put({type: ACTION_TYPES.LOGIN_FAILURE, error})
  }
}

монитор саги

export function* loginMonitor() {
  yield takeLatest(ACTION_TYPES.LOGIN_REQUEST,login);
}

создатель действий

function login(params) {
  return {
    type: ACTION_TYPES.LOGIN_REQUEST,
    params
  }
}

Ответы

Ответ 1

Я думаю, вы должны добавить перенаправление и оповещение к генератору входа. Таким образом, вся логика находится в саге, и ее все еще легко проверять. Поэтому в основном ваша сага о регистрации будет выглядеть так:

function* login(action) {
  try {
    const state = yield select();
    const token = state.authReducer.token;
    const response = yield call(API.login,action.params,token);
    yield put({type: ACTION_TYPES.LOGIN_SUCCESS, payload:response.data});
    yield call(setItem,AUTH_STORAGE_KEY,response.data.api_token);
    yield call(redirectToHomePage); // add this...
  } catch (error) {
    yield put({type: ACTION_TYPES.LOGIN_FAILURE, error});
    yield call(alertError); // and this
  }
}

Ответ 2

Я весь день прогуливался с этим материалом, переходя от thunk to redux-saga

У меня тоже много кода, который выглядит как

this.props.actions.login(credentials)
.then((success)=>redirectToHomePage)
.catch((error)=>alertError);

его можно использовать thunk + saga

function login(params) {
  return (dispatch) => {
    return new Promise((resolve, reject) => {
      dispatch({
        type: ACTION_TYPES.LOGIN_REQUEST,
        params,
        resolve, 
        reject
      })
    }
  }
}

затем в саге можно просто сделать что-то вроде

function* login(action) {
  let response = yourApi.request('http://www.urthing.com/login')
  if (response.success) {
    action.resolve(response.success) // or whatever
  } else { action.reject() }
}

Ответ 3

Вы можете просто поработать, передав дополнительную информацию о ваших успехах и функциях обратного вызова с ошибками в саму полезную нагрузку. С тех пор, как редукционный шаблон работает совершенно не так.

this.props.actions.login({
   credentials,
   successCb: success => redirectToHomePage)
   errorCb: error => alertError)
 });

В саге вы можете деконструировать эти обратные вызовы из полезной нагрузки и запускать их очень легко в зависимости от потока программ.