我能知道组件对 redux-saga 的调用何时结束吗？

Question

当组件正在调用 redux-saga 时，它会尝试暴露加载图标，并在调用 redux-saga 完成时隐藏加载图标。

// at component
const app: FunctionComponent<IProps> = ({ location, history }) => {
  ...
  const [isLoading, setLoading] = useState(false);
  useEffect(() => {
    setLoading(true);
    ItemsActions.getItems(); <- this line is redux-saga call request

    // I want the redux saga call to be completed and the loading to end here!
    setLoading(false);

  }, []);
  ...
}

// at redux action & reducer
export function* getItemsSaga() {
  yield takeEvery(GET_ITEMS_REQUEST, function*() {
    try {
      const response = yield call(myApi, payload);
      yield put(GET_ITEMS_SUCCESS, { payload: response });

      // I want to complete the loading on the component now!

    } catch(e) {
      console.log(e);
    }
  });
}

Answer 1

只需让你的 reducer 的 switch 语句包含 GET_ITEMS_SUCCESS 并在触发时将加载变量改回 false。不要忘记对任何错误状态执行相同的操作。