web-dev-qa-db-ja.com

Redux-Sagaでコールバックを行う方法は？

シナリオは、アクションをディスパッチした後、ユーザーをリダイレクトするか、成功、エラーコールバックに基づいてアラートを表示することです。

以下は、タスクにredux-thunkを使用したコードです

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

redux-thunkのディスパッチアクションはPromiseを返すため、応答を使用して簡単に操作できます。

しかし、今はredux-sagaに手を染めて、上記のコードと同じ結果をどのようにして得ることができるかを理解しようとしています。 Sagaは別のスレッドで実行されるため、上記のクエリからコールバックを取得する方法はありません。だから私はあなたたちがそれをどのように行うかを知りたかっただけです。またはredux-sagaを使用しているときにコールバックを処理するための最良の方法は何ですか？ディスパッチアクションは次のようになります。

this.props.actions.login（credentials）;

と佐賀

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
  }
}
reactjsreduxredux-saga
19
ZaL

ログインジェネレーターにリダイレクトとアラートを追加する必要があると思います。このように、すべてのロジックはサガにあり、それはまだ簡単にテストされます。したがって、基本的に、ログインサガは次のようになります。

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
  }
}
6
Henrik R

サンクからリダックス・サーガに切り替えて、私は一日中、これをいじくり回していました。

私もこのようなコードがたくさんあります

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

サンク+サガの使用が可能

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() }
}
11
James

成功とエラーのコールバック関数に関する追加情報をペイロード自体に渡すことで、簡単に処理できます。以来、reduxパターンはかなり分離された方法で機能します。

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

サガでは、これらのコールバックをペイロードから分解し、プログラムフローに基づいて非常に簡単に実行できます。

0
Param Singh