Dva: 효과 취소 방법

모델 구독에서 라우팅 변경 사항을 모니터링하고 페이지가 A 페이지가 아닌 경우(A 페이지 나가기) 또는 A 페이지(A 페이지 입력)인 경우 모델 A의 상태를 수동으로 지울 수 있습니다.

대답 해줘서 고마워. 나는 이 방법을 시도했다.상태 자체를 지우는 데에는 문제가 없다.componentWillUnmount에서 또는 구독이 라우팅 변경을 모니터링할 때 지울 수 있다.문제는 모달 상태를 지운 후 효과에서 비동기 작업에 의해 반환된 데이터가 있다는 것입니다. 여전히 모달 상태로 다시 작성되어 이전 비즈니스의 더티 데이터가 생성됩니다.
구독의 라우팅 변경 사항을 모니터링하기도 합니다.A 페이지를 나갈 때 unmodel을 사용하여 모델 A를 제거합니다. 페이지 A에 들어가서 수동으로 모델 A를 로드하는 것은 쓸모가 없습니다. 이 모델이 비즈니스에서 마지막으로 사용되었는지 또는 새로 로드된 모델인지에 관계없이 데이터가 기록됩니다.
따라서 가장 좋은 방법은 모델의 상태를 지우고 현재 네임스페이스의 모든 효과를 취소하는 것이지만 호출할 메서드를 찾을 수 없습니다. 조언을 구하다.

원본포스터에 문제가 있어서 콤포넌트를 언인스톨했을때 미완성 효과를 없애고 싶었는데 방법이 없어서 드바에서는 이런 API를 제공하지 않는듯 합니다 @sorrycc

효과를 취소하고 사가를 분리할 수 있습니까?

@dlamon도 같은 상황에 처해 경로가 바뀌었을 때 정리를 원했습니다. 지금 해결책이 있습니까?

@KyrieChen 은 경로 전환 중에 정리할 것으로 예상되지 않습니다. 경로 전환이 완료된 후 통신이 돌아오지 않을 수 있고, 통신이 다시 돌아온 후에도 더티 데이터가 여전히 정리된 모델 데이터 영역에 다시 쓰기 때문입니다.

현재 접근 방식은 트랜잭션(componentWillMount)을 입력할 때마다 현재 트랜잭션에 해당하는 모델 데이터 영역에 UUID로 하위 데이터 영역을 생성하는 것으로, 현재 트랜잭션에서 사용되는 데이터를 저장하는 데 사용됩니다. 트랜잭션이 종료되면 지워집니다(componentWillUnmount). 아래의 모델 구조와 유사합니다.

클리어 모델 이후에 통신이 다시 오면 데이터를 쓸 때 현재 리듀서가 사용하는 UUID가 이전 트랜잭션에서 사용된 UUID이므로 더티 데이터는 이전 트랜잭션의 데이터 영역에 쓰여지고, 다음 트랜잭션을 위해 생성되지 않습니다.

그러나 이 방법도 좋지 않은데, 첫째, 논리 복잡도가 증가하고, 둘째 초기값을 얻기 위해 널값 판정을 추가해야 하므로 코드의 복잡도가 높아진다. 제가 하는 일은 주로 금융시스템을 위한 것이기 때문에 이런 더러운 데이터가 무서워서 이 방법을 선택합니다.
가장 좋은 방법은 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 이 방법에 대해 답변 @CANCEL_EFFECTS '}) 로 인해 해당 모달의 효과가 무효가 됩니다. #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는 axios.CancelToken으로 취소할 수 있습니다.

@ws1942 감사합니다!
이런 식으로 효과를 취소할 수 있습니다. 로딩 상태를 표시하는 것이 더 번거롭습니다. 로딩 상태를 표시하기 위해 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'],
    };
  }