Dva: エフェクトをキャンセルする方法

モデルのサブスクリプションのルーティング変更を監視し、ページが非Aページ（Aページを離れる）またはAページ（Aページに入る）の場合、モデルAの状態を手動でクリアできます。

回答ありがとうございます。この方法を試しました。状態自体をクリアしても問題ありません。componentWillUnmountでクリアすることも、サブスクリプションがルーティングの変更を監視するときにクリアすることもできます。問題は、モーダル状態をクリアした後、非同期操作によって返されるデータがエフェクトで返されることです。それでもモーダル状態に書き換えられるため、前のビジネスのデータがダーティになります。
サブスクリプションのルーティングの変更も監視しています。ページAを離れるときは、unmodelを使用してモデルAをアンインストールします。ページAに入り、モデルAを手動でロードすることは無意味です。非同期通信が戻った場合、モデルAが見つかっている限り、このモデルがビジネスで最後に使用されたモデルであるか、新しくロードされたモデルであるかに関係なく、データが書き込まれます。
したがって、最良の方法は、モデルの状態をクリアし、現在の名前空間のすべての効果をキャンセルすることですが、呼び出すメソッドが見つかりません。アドバイスを求める。

元のポスターの問題が発生しました。コンポーネントがアンインストールされたときに未完成の効果をキャンセルしたかったのですが、方法がないことがわかりました。Dvaはこの種のapi @ sorryccを提供していないようです。

効果をキャンセルしてサガを分離することは可能ですか？

@dlamonも同じ状況に遭遇し、ルートが切り替えられたときにクリーンアップしたいと考えていました。今解決策はありますか？

ルート切り替えが完了した後、通信が戻らない可能性があり、通信が戻った後もダーティデータがクリーンアップされたモデルデータ領域に書き戻されるため、 @ KyrieChenはルート切り替え中にクリーンアップすることは期待されていません。

私の現在のアプローチは、現在のトランザクションで使用されるデータを格納するために使用されるトランザクションを入力するたびに（componentWillMountの場合）、現在のトランザクションに対応するモデルデータ領域にUUIDを持つサブデータ領域を生成することです。UUIDが書き込まれますトランザクションが終了するとクリアされます（componentWillUnmount）。以下のモデル構造と同様です。

クリアモデルの後に通信が戻ってきた場合、データを書き込むときに、現在のレデューサーによって使用されるUUIDは前のトランザクションで使用されたUUIDであるため、ダーティデータは前のトランザクションのデータ領域に書き込まれ、次のトランザクションでは生成されません。影響。

ただし、この方法も適切ではありません。1つはロジックの複雑さを増し、2つ目は初期値を取得するにはnull値の判断を追加する必要があるため、コードが複雑になることです。私がやっていることは主に金融システムのためなので、このような汚いデータが怖いので、この方法を選びます。
最善の方法はredux-sagaのキャンセル効果メカニズムに似ていると思いますが、dvaは現在それをサポートしていないようです。
より良い解決策がある場合は、@我

@dlamon私もそれに遭遇しました。私は自分でデモを書きました、そして私は少し問題を感じますhttps://codesandbox.io/s/yqwqpmvwvj

namespaceからproductsからmodelをeffectメソッドでキャンセルします：
dispatch({ type: 'products/@<strong i="10">@CANCEL_EFFECTS</strong>' });

このコードは

        yield sagaEffects.fork(function*() {
          yield sagaEffects.take(`${model.namespace}/@@CANCEL_EFFECTS`);
          yield sagaEffects.cancel(task);
        });

@ wss1942このメソッドに返信していただきありがとうございます。試してみました。dispatch （{type： 'products / @ ＃796に似ています

@dlamon dvaは、効果をクリアするためのAPIを提供していないようです。ただし、モデルで定義された効果で複数のサガを書き込むことができます。

 namespace: 'products',
 effects: {
  *start(){},
  *stop(){},
  watchLogin: [
      function* ({ take, put, call, cancel, fork, cancelled }) {
          yield take('start');
          const timerTask = yield fork(timer)
          const bgSyncTask = yield fork(bgSync)
          yield take('stop')
          yield cancel(bgSyncTask)
          yield cancel(timerTask)

        function* bgSync() {
          try {
            while (true) {
              const result = yield call(delay, 5 * 1000);
              yield put({ type: 'stop' })
            }
          } finally {
            if (yield cancelled())
              yield put({ type: 'log', payload: 'fetch🛑' })
          }
        }
        function* timer(time) {
          let i=0;
          while (true) {
            yield put({ type: 'log', payload: i++ })
            yield delay(1000)
          }
        }
      },
      { type: 'watcher' },
    ],
}

bgSyncは非同期タスクであり、 action： startを使用してタスクを開始し、 action：stopを使用しキャンセルできます。これは、特定の効果をキャンセルするために実行できます。
また、非同期タスクがネットワークリクエストの場合、ネットワークリクエストをキャンセルする操作も必要になる場合があります。たとえば、axios.CancelTokenを使用してaxiosをキャンセルできます。

@ wss1942ありがとう！
このように、エフェクトをキャンセルすることができます。ロードステータスを表示するのは面倒です。dvaに付属のloading.effectsを直接使用してロードステータスを表示することはできません。変更するには、独自のコードを作成する必要があります。
私はそれを変更し、完全なモデルコードを投稿しました

import { getProduct } from '@/services/Products';
import { isRespSucc, showErrorMsg } from '@/utils/utils';

const initState = {};

export default {
  namespace: 'product',

  state: initState,

  effects: {
    /**
      在两个 Effects 之间触发一个竞赛（race）
      如果task先结束，竞赛结束。
      如果task未结束时收到cancel，race effect 将自动取消 task。
    */
    *cancelable({ task, payload }, { call, race, take }) {
      yield race({
        task: call(task, payload),
        cancel: take('cancel'),
      });
    },

    /**
      取消所有未完成的任务，并执行数据清理
    */
    *clear(_, { put }) {
      yield put.resolve({ type: 'cancel' });
      yield put({ type: 'clearState' });
    },

    *getProduct({ payload }, { call, put, cancelled }) {
      // eslint-disable-next-line
      yield put.resolve({ type: 'cancelable', task: getProductCancelable, payload });

      function* getProductCancelable(params) {
        try {
          // 调用网络请求
          const response = yield call(getProduct, params);
          // 返回结果判断
          if (!isRespSucc(response)) {
            showErrorMsg(response);
            return;
          }
          // 取值
          const { productName } = response.data;
          // 调用reducer存值
          yield put({
            type: 'saveState',
            payload: { productName },
          });
        } finally {
          if (yield cancelled()) {
            // TODO: 取消网络请求
          }
        }
      }
    },
    *getCity(_, { call, put, cancelled }) {
      // eslint-disable-next-line
      yield put.resolve({ type: 'cancelable', task: getCityCancelable });

      function* getCityCancelable() {
        // TODO: 具体实现
      }
  },

  reducers: {
    saveState(state, { payload }) {
      const newState = { ...state, ...payload };
      return newState;
    },
    clearState() {
      return initState;
    },
  },
};

トランザクション（componentWillUnmount）を離れるとき、dispatch clearは現在のモデルのすべての未完了の効果をキャンセルでき、getProductLoadingとgetCityLoadingも通常どおり使用できます。

  componentWillMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'product/getProduct',
      payload: {
        productNumber: '123456',
      },
    });
    dispatch({
      type: 'product/getCity',
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'product/clear',
    });
  }

  function mapStateToProps(state) {
    return {
      getProductLoading: state.loading.effects['product/getProduct'],
      getCityLoading: state.loading.effects['product/getCity'],
    };
  }