1

我希望在下面提供一些指导/反馈。每当我开发一个 React 应用程序时，我都喜欢坚持类似模式的模式，我不介意样板文件，因为我相信它为我提供了一种非常结构化的方法来开发我的应用程序。这只是个人喜好，但我开始注意到在获取数据部门添加一些新功能时的一些缺点。所以通常这就是我的典型应用程序的样子。

带有api.js返回 axios 实例的 API 类的文件。

import axios from axios 

export default class Api {

    static allMessages(){
        return axios({
            method: "get",
            url: "/messages",
            headers:{
                accept: "application/json",
                "Content-Type": "application/json"
            }
        })
    }
    
}

我的constants.js

export const MESSAGES_LOADING = "MESSAGES_LOADING";
export const MESSAGES_SUCCESS = "MESSAGES_SUCCESS";
export const MESSAGES_ERROR = "MESSAGES_ERROR";

我的messageActions.js

export const loadMessages = () => async (dispatch) => {
  dispatch({ type: MESSAGES_LOADING });
  try {
    const messages = await Api.allMessages();
    return dispatch({ type: MESSAGES_SUCCESS, messageList: messages.data });
  } catch (error) {
    return dispatch({ type: MESSAGES_ERROR, error: error.message });
  }
};

最后但并非最不重要的是，我的messageReducer.js

const initialState = {
  messages: [],
  loading: false,
  error: "",
};

const messages = (state = initialState, action) => {
  switch (action.type) {
    case MESSAGES_LOADING:
      return { ...state, loading: true, error: "" };
    case MESSAGES_SUCCESS:
      return { ...state, messages: action.messageList, loading: false };
    case MESSAGES_ERROR:
      return { ...state, error: action.error, loading: false };
    default:
        return state
  }
};

export default messages;

我想要实现的是在这个消息异步调用上实现 SWR。我遇到的问题是 SWR 是一个钩子，正如我们在上面看到的那样，我们正在使用纯函数。有没有人遇到过在上述结构的应用程序上实现 SWR 的方法？

到目前为止我尝试的是创建一个自定义 SWR 钩子，当直接在组件上使用时就像一个魅力，我想做的是将它添加到我的操作中，因为其他一些调用将需要广泛的副作用与他们合作我上面展示的内容是为了说明目的。

我创建的钩子看起来像这样useSWRList.js

import useSWR from "swr";

export const useSWRList = () => {
  const fetcher = (url) =>
    axios({
      method: "get",
      url: url,
      headers: {
        accept: "application/json",
        "Content-Type": "application/json",
      },
    });

  const { data, error } = useSWR("/messages", fetcher);

  return {
    data,
    error,
  };
};

我怎么能把它添加到我的 messageActions 中？

这里有没有人尝试过这样做，如果有，请给我一些反馈。任何事情都将不胜感激。您会建议在这种设置中实现类似 SWR 的行为吗？

4

1 回答 1

0

小心你尝试做的事情。

  • useSwR 用于获取每次发出请求的数据，而不是接收更改的某些参数。
  • redux 是如果您需要保存存储（数据）并且许多组件使用相同的数据在它们之间进行交互。

通常不将 redux 与 useSWR 一起使用，它会使您的代码不必要地复杂化，因此请检查您的项目的需求并选择一个redux或useSWR。检查链接以了解有关它们的更多信息。

于 2021-06-29T18:52:10.420 回答