Redux-sagaは取り消し後にアクションを呼び出します

Question

私はredux-sagaを内部に持つReact-boilerplateを実装しようとしています。だから私は、サーバーからいくつかのデータを取得し、別のページにリダイレクトしようとしています。問題は、リダイレクトする前にsagaがサーバーに2回目のリクエストを行うことです。私はそれをキャンセルすることに何か問題があると思う。ここに私のコードの一部です：

export function* fetchData() { 
    ... 
    console.log('fetched'); 
    yield browserHistory.push('/another-page'); 
} 

export function* fetchDataWatcher() { 
    while (yield take('FETCH_DATA')) { 
    yield call(fetchData); 
    } 
} 

export function* fetchDataRootSaga() { 
    const fetchWatcher = yield fork(fetchDataWatcher); 

    yield take(LOCATION_CHANGE); 
    yield cancel(fetchWatcher); 
} 

export default [ 
    fetchDataRootSaga 
] 

この例では、2つのコンソールログがあり、2つ目はリダイレクトする前に表示されます。どうすれば修正できますか？

そして別の質問です。実際、このファイルにはもっと多くの機能があります。私はそれらのそれぞれのために "rootSaga"を作成する必要がありますか、私はそれらをすべて取り消すことができますfetchDataRootSaga（）？私はこのようにサガをキャンセルすれば正常です。

export function* fetchDataRootSaga() { 
    const watcherOne = yield fork(fetchDataOne); 
    const watcherTwo = yield fork(fetchDataTwo); 
    ... 

    yield take(LOCATION_CHANGE); 
    yield cancel(watcherOne); 
    yield cancel(watcherTwo); 
    ... 
} 

ありがとうございます！ P.P.このコードがベストプラクティスかどうかはわかりません。触発されているthis repository

Answer 1

これは、長時間実行される可能性のある非同期要求を処理して返すことを目的とする、sagaの目的を破ります。あなたが代わりにそう

export function* fetchData() { 
    ... 
    console.log('fetched'); 
    yield put(setRedirectState('/another-page')); 
} 

のようなあなたのReduxのストアに状態を設定することができ、私は持っていないリダイレクト状態がComponentWillUpdateであなたのコンテナに設定されている場合、次に見ると、この

import { push } from 'react-router-redux'; 
dispatch(push(state.redirecturl)) 

のようなものに応じてリダイレクトこれを試しましたが、私がReact-boilerplateで経験したことは、これが最初に試してみることです。

Answer 2

たぶん、もう少しこの

export function* fetchDataWatcher() { 
    while (true) { 
    yield take('FETCH_DATA'); 
    yield call(fetchData); 
    } 
} 

また、あなたが全体的に私はputに躊躇だろう、おそらく

import { push } from 'react-router-redux'; 
import { put } from 'redux-saga/effects'; 

export function* fetchData() { 
    ... 
    console.log('fetched'); 
    yield put(push('/another-page')); 
} 

をこのような何かを実行して、ルート良くすることができますように見えるようにfetchDataWatcherの内側にあなたのループを調整することにより、起動あなたがすべての場所の変更を取り消したい場合にのみ、takeをルートチェンジしてから別々に実行します（ただし、それはあなたが何をしているかを前提としています:)