Создать 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