Блог

Я хотел бы получить некоторые рекомендации / отзывы в следующем. Всякий раз, когда я разрабатываю приложение react, мне нравится придерживаться шаблона, подобного flux, я не возражаю против шаблона, поскольку считаю, что это дает мне довольно структурированный подход к разработке моих приложений. Это просто личное предпочтение, но я начинаю замечать некоторые недостатки, когда дело доходит до добавления некоторых новых функций в отдел выборки данных. Обычно так выглядит мое типичное приложение.

api.js файл с классом API, который возвращает экземпляр axios.

 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, в такого рода настройках.

Будьте осторожны с тем, что вы пытаетесь сделать.

• useSwR предназначен для получения данных, отправляющих запрос каждый раз, когда какой-либо параметр получает изменение.
• redux — это если вам нужно сохранить хранилище (данные), и многие компоненты взаимодействуют между собой, используя одни и те же данные.

Обычно не используется redux с useSWR, это может усложнить ваш код без необходимости, поэтому проверьте, каковы потребности вашего проекта, и выберите один redux или useSWR. Проверьте ссылку, чтобы узнать о них больше.