reactjs - React/Redux：如何异步或其他？

Question

大家好，今天在 Redux 中需要您的帮助...

我有过滤器（你可以在图片上看到）和几个输入（过滤器）用于我的搜索。为了接收舰队信息（过滤器），我需要传递一个“ID”表单客户端......

const clientChange = (event) => {
  const client = event.target.value;
  const client_id = client.id;
  dispatch({ type: "CLIENT_LIST_SELECTION", payload: client_id });
  getFleetFilter();
};

那是我在 Form.js 中的函数clientChange

const client_id = useSelector((state) => state.client.selection);
const getFleetFilter = async () => {
  dispatch({ type: "FLEET_LIST_REQUEST" });
  try {
    let res = await getFleet(token, client_id);
    let data = res.data.data
    dispatch({ type: "FLEET_LIST_LOAD", payload: data });
  } catch (err) {
    if (err) {
      console.log("Error Fleet Data");
      console.log(err);
    };
  };
};

这是我在 Search.js 中的函数getFleetFilter

问题：我在 API 字符串中有未定义的client_id，因为调用函数getFleetFilter比存储在 Redux 中的client_id更快！

问题：如何避免在此处继续使用 Redux？

谢谢！

标签： reactjsasynchronousasync-awaitreact-redux

Answer 1

您可以像这样使用 useEffect 回调：

const client_id = useSelector((state) => state.client.selection);

useEffect(() => {
  if (client_id) {
    getFleetFilter();
  }
}, [client_id]);

const clientChange = (event) => {
  const client = event.target.value;
  const client_id = client.id;
  dispatch({ type: "CLIENT_LIST_SELECTION", payload: client_id });
};

const getFleetFilter = async () => {
  dispatch({ type: "FLEET_LIST_REQUEST" });
  try {
    let res = await getFleet(token, client_id);
    let data = res.data.data
    dispatch({ type: "FLEET_LIST_LOAD", payload: data });
  } catch (err) {
    if (err) {
      console.log("Error Fleet Data");
      console.log(err);
    };
  };
};