使用 React、Redux-thunk 进行 API 调用的最佳位置在哪里？

Question

我已经检查了stackoverflow.com以及整个互联网的类似问题，但没有找到任何问题，因此请忽略，如果您找到一个人，请不要享有负面的声誉，因为我在一生中需要声誉！

我的代码工作正常，但我想知道为什么在动作创建器文件中调用API请求不是一个好练习，什么是替代方法？

mycomponent.jsx

const MyComponent = () => {
   dispatch = useDispatch();
   return <div>
      <button onClick={()=>{
          dispatch(getItems("?color=xxx&manufacturer=yyy"));
      }}></button>
   </div>
}

ActionCreator.js

const getItems = (queryString) => async (dispatch) => {
 try{
   dispatch({
      type: "FETCH_REQUEST",
   });

   // >>>>>> Here is the problem! <<<<<<
   const response = await fetch("https://subname.name.com/api/" + queryString);
   const data = await response.json();

   dispatch({
      type: "FETCH_SUCCESS",
      payload: data,
   });

 }catch(error){
    dispatch({
      type: "FETCH_FAILURE",
      payload: error,
   });
 }

}

降低>降低> JS

const INITIAL_STATE = {
    items: [],
    isLoading: false,
    error: "",
};

const reducer = (currentState, action) => {
    switch(action.type){
        case: "FETCH_REQUEST":
            return {
                ...currentState,
                isLoading: true,
        };

        case: "FETCH_SUCCESS":
            return {
                ...action.payload,
                isLoading: false,
        };

        case: "FETCH_FAILURE":
            return {
                items: [],
                error: "An error happend when fetching main data.",
        };
    }
}

Answer 1

我相信这主要取决于您想要做什么以及数据的用例是什么。

例如，如果您尝试获取用户数据以确定身份验证或授权，则应该使请求尽可能高，
然而，如果您尝试获取仅在边缘情况下严格需要的数据，那么使用带有事件侦听器的按钮应该没问题。

另一种选择是在 useEffect 中使用分派或使用专用于执行此操作的回调函数。

由于缺乏声誉，我无法将其作为评论，但我询问了一位更有经验的开发人员，从我收集到的信息来看，我得到的一般答复是 - 这实际上取决于数据用例。

Answer 2

您现在可以与RTK查询一起使用Redux工具包
他们还建议使用

这些技术使用Typescript，这将使您的代码更加简洁。

RTK查询此处

export const YourApi = createApi({
    reducerPath:"posts",
    baseQuery:fetchBaseQuery({
      baseUrl:"http://https://subname.name.com/api/"
    })
    endpoints:(builder) => ({
      getColor:builder.query<Your_Response_type, string|void> /** Cos you demand a string **/ {
       query:(input) => `${input}`
      }
    })
})

export const {useGetColorQuery} = YourApi 

，然后使用此挂钩在组件中使用它

const { isLoading, isError, data, isSuccess } = useGetColorQuery(page)

return (
   <>
     {isLoading && 'Loading...'}
     {isError && 'Something went wrong'}
     {isSuccess && data}
   </>

)
  

您应该阅读文档

在此Architechture中，Redux Toolkit做了与您所做的相同的事情。
我也用这种方式做的架构没有错。