1

Я только изучаю redux + react. У меня многостраничное приложение, и в некоторых используются ajax запросы на сервера для получения данных.
Компонент Loader.

cosnt Loader = () => {
  return (
    <div class="text-center">
      <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
  );
}

Как правильно сделать, чтобы не было в будущем при разработке возможных конфликтов или что то подобное.
Создать 1 редюсер Лоадера, где я буду хранить значение true/false и везде просто где нужен лоадер получать значение и диспачить или же для каждой страницы создать собственный редюсер, где будет значение статуса лоадера?

1 ответ 1

0

Создать 1 редюсер Лоадера, где я буду хранить значение true/false и везде просто где нужен лоадер получать значение и диспачить или же для каждой страницы создать собственный редюсер, где будет значение статуса лоадера?

Не то и не другое. Все зависит от ситуации.

Есть очень много вариантов. Я же напишу самые популярные.

Для краткости кода вместо fetch буду использовать axios

Первый вариант. Внутри вашего компонента.

  const [loading, setLoading] = useState(false);
  useEffect(() => {
    const callRequest = async () => {
      setLoading(true);
      const res = await axios.get("url");
      setLoading(false);
    };
  }, []);

Плюсы:

  • Не засоряете глобальный state в основном ненужными true/false значениями.
  • Экономите куча кода. А то каждый раз для каждого прелоадера писать actionType, actionCreator это ад.

Второй вариант через саги.

У вас будет отдельный reducer для контроля именно всех прелоадеров вашего проекта.

Пример reducer-а:

export default (state = {}, action) => {
  switch (action.type) {
    case actionTypes.TOGGLE_LOADING: {
      const { ids, isLoading } = action.payload;
      const override = ids.reduce((res, id) => ({ ...res, [id]: isLoading }), {});
      return { ...state, ...override };
    }

    default:
      return state;
  }
};

И будет actionCreator

export const toggleLoading = (isLoading, ids) => ({
  type: actionTypes.TOGGLE_LOADING,
  payload: {
    ids,
    isLoading,
  },
});

Этот reducer и actionCreator мы не трогаем.И все будем делать в сагах.

Пример саги:

function* fetchAnything() {
  yield put(toggleLoading(true, ["anyUniqueId"]));
  try {
    // отправляем наши запросы
  } catch (err) {
    // обрабатываем ошибку
  } finally {
    yield put(toggleLoading(false, ["anyUniqueId"]));
  }
}

Тут у вас в сагах будет меняться только идентификатор который вы зададите для каждой саги. И потом извлекаете эти саги через reselect и показываете в UI. Это очень просто так что думаю с этим сами справитесь.

Плюсы:

  • Чистый код в проекте. Один раз написали reducer и actionCreator потом используете везде как показано на примере.

Третий вариант:

Через react-query

react-query из коробки дает контроль для каждого запроса.

Пример скопировал тут:

function Todos() {
   const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)
 
   if (isLoading) {
     return <span>Loading...</span>
   }
 
   if (isError) {
     return <span>Error: {error.message}</span>
   }
 
   return (
     <ul>
       {data.map(todo => (
         <li key={todo.id}>{todo.title}</li>
       ))}
     </ul>
   )
 }

Плюсы:

  • Как видно с примера с react-query очень упрощает нам работу вы сэкономите куча времени и напишете более лаконичный код.

Выбор за вами.

Если нет возможности использовать сторонние библиотеки используйте первый вариант с fetch. Иначе выбирайте один из двух. Redux-saga или React-query

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.