在导航到另一页面之前，如何确保减速器响应动作已完成？

Question

我目前将Redux Saga与React Native结合使用，我有一个问题，如何导航到另一个页面之前，如何正确处理reducer操作未触发成功或失败操作的情况。我需要等到触发成功或失败操作后，才能导航到另一个页面，但是无论如何它都可以导航。

我设置了代码，以便在导航之前检查加载或错误状态，但无论如何导航仍然会发生。我认为这是因为updateItems是异步的，并且在响应返回之前，处理代码执行得如此之快，例如如果我确实收到错误，该页面将导航而不是等待，以便我可以在该页面上显示错误。

我认为这可能与我需要在减速器中添加的内容有关，但我不确定。

这是我单击的方法，该方法触发reducer调用，并且导航一切正常。

updateItems = () => {
    const { code } = this.state;
    const { loading, error } = this.props;
    const id = this.props.navigation.state.params.id;

    this.props.updateItems({
      id: id,
      code: code,
    });

    if (!loading && !error) {
      this.props.navigation.navigate("newPage");
    }
  };

这里是减速器本身：

const UPDATE_ITEMS_REQUEST = "UPDATE_ITEMS_REQUEST";
const UPDATE_ITEMS_SUCCESS = "UPDATE_ITEMS_SUCCESS";
const UPDATE_ITEMS_FAILURE = "UPDATE_ITEMS_FAILURE";

export default (itemsReducer = (
  state = {
    data: {
      items: {},
    },
    error: null,
    loading: false,
  },
  { type, payload },
) => {
  switch (type) {
    case UPDATE_ITEMS_REQUEST:
      return Object.assign({}, state, { loading: true, error: null });
    case UPDATE_ITEMS_FAILURE:
      return Object.assign({}, state, { loading: false, error: payload });
    case UPDATE_ITEMS_SUCCESS:
      return {
        loading: false,
        error: null,
        data: payload,
      };
    default:
      return state;
  }
});

export function updateItems(payload) {
  return { type: UPDATE_ITEMS_REQUEST, payload };
}

export function updateItemsFailure(payload) {
  return { type: UPDATE_ITEMS_FAILURE, payload };
}

export function updateItemsSuccess(payload) {
  return { type: UPDATE_ITEMS_SUCCESS, payload };
}


function* updateItemsSaga(payload) {
  const response = yield call(putItems, payload);
  if (response.ok) {
    yield put(updateItemsSuccess(payload));
  } else {
    yield put(
      updateItemsFailure("There has been an error"),
    );
  }
}

export function* watchUpdateItems() {
  yield takeLatest(UPDATE_ITEMS_REQUEST, updateItemsSaga);
}

// API
const putItems = async payload => {
  const res = await fetch(
    `${env.url}/updateItems`,
    {
      method: "PUT",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        id: payload.payload.id,
        code: payload.payload.code,
      }),
    },
  );

  if (!res.ok)
    return {
      status: res.status,
      ok: false,
    };

  const response = await res.json();
  response.status = res.status;
  response.ok = res.ok;
  return response;
};

Answer 1

您可以使用react路由器useHistory more info on how to route将用户重定向到redux操作内的新路由>
1. 您可以添加一个标志并将其设置为true作为响应

Answer 2

似乎问题出在updateItems中。它具有两个内部属性{ loading, error }。由于这不是生成器函数，因此一旦开始执行此函数，便会触发操作updateItems（这很好），之后便会进行导航，因为该函数检查了{ loading, error }（即false＆ null）。

解决方案可以使用updateItemsSaga中的导航部分，如下所示：