React/Redux：如何异步或其他？答案

【问题标题】：React/Redux: How to async or something else?React/Redux：如何异步或其他？
【发布时间】：2021-09-15 00:09:55
【问题描述】：

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

我有过滤器（你可以在图片上看到）和几个输入（过滤器）用于我的搜索。为了接收 Fleet 信息（过滤器），我需要通过 “ID” 表单 Client...

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 比client_id 存储在 Redux 中！

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

谢谢！

【问题讨论】：

标签： reactjs asynchronous async-await react-redux

【解决方案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);
    };
  };
};

【讨论】：