Задать вопрос
@webe
frontend

Как менять состояние isFetching внутри одного редьюсера?

Есть сущность пользователей, сейчас я могу выводить список пользователей и добавлять новых.
в будущем будет еще EDIT_USER_ , а так же DELETE_USER_
Хочу отметить что на каждый запрос нужен прелаудер, т.е. поле isFetching так как сервер отрабатывает небыстро.

в данном примере
1) используется один isFetching на все виды экшенов, что не есть хорошо.
2) исопльзуется 1 редьюсер для компактности кода. (что есть хорошо как по мне)

Как с точки зрения архитектуры сделать isFetching для каждого из экшенов?
Знаю что можно создать 6 редьюсеров и у каждого будет свой isFetching , но это ухадшит читаемость стора.
Можно оставить один редьюсер как сейчас и сделать isFetchingGetUsers isFetchingAddUser isFetchingEditUser isFetchingDeleteUser внутри одного редьюсера, но такой вариант тоже не очень хороший, у нас получается каша из разных названий полей

как быть? подскажите плиз.
Или все же нужно разделять на 6 редьюсеров?

const initialState = { isFetching: false, error: null, data: [] };

export default (state = initialState, { type, payload }) => {
  switch (type) {
    case 'GET_USERS_REQUEST':
      return { ...state, isFetching: true };
    case 'GET_USERS_SUCCSESS':
      return { ...state, isFetching: false, data: payload };
    case 'GET_USERS_ERROR':
      return { ...state, isFetching: false };

    case 'ADD_USER_REQUEST':
      return { ...state, isFetching: true };
    case 'ADD_USER_SUCCSESS':
      return { ...state, isFetching: false };
    case 'ADD_USER_ERROR':
      return { ...state, isFetching: false };

    default:
      return state;
  }
};
  • Вопрос задан
  • 313 просмотров
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • ProductStar
    React: отточите навыки интерфейсной разработки
    6 недель
    Далее
  • Skillfactory
    Специализация Frontend-разработчик
    9 месяцев
    Далее
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Состояние коллекции пользователей лучше хранить в одном редьюсере.
Если в приложение подразумевается работа с одной активной сущностью, то для нее лучше сделать отдельный редьюсер. В этом случае может быть удобным использовать один ключ для редактирования, сохранения и удаления.
Если подобные ключи нужны для работы с коллекцией, например быстрое редактирование, добавление и удаление в таблице. То можно использовать коллекцию состояний:
{
  isFetching: {
    'ALL': false,
    '122bc-e43gf-24002-12ea1-ca785': true,
  },
}

Где всегда есть свойство для всех сущностей и опционально добавляется для нужных элементов по id.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 50 000 до 90 000 ₽
IT ATLAS Москва
от 200 000 до 250 000 ₽
ITK academy Казань
от 50 000 до 90 000 ₽