@iordania

Как правильно показывать спинер при загрузке данных в redux-saga?

есть reducer со следующими типами:
export const todos = (state = initialSate, action) => {
  switch (action.type) {
    case IS_FETCH_DATA:
      return {
        ...state,
        isFetching: true,
      };

    case LOAD_TODO:
      return {
        ...state,
        isFetching: false,
        todos: action.payload,
      };

    default:
      return state;
  }
};


есть сага, которая обрабатывает action

function* fetchTodosData(action) {
  yield put({
    type: IS_FETCH_DATA,
  });
  console.log("SAGA fetchTodosData");

  try {
    const payload = yield call(() =>
      axios.get(`http://placeholder-api/todos/`).then((res) => res.data)
    );

    console.log({ todoSaga: payload });

    // like as dispatch
    yield put({
      type: LOAD_TODO,
      payload,
    });
  } catch (e) {}
}

// Watchers
export function* fetchTodosDataSagaWatcher() {
  yield takeLatest(LOAD_TODO_SAGA, fetchTodosData);
}


Флот следующий: при вызове саги fetchTodosData мы первым делам изменяем поле загрузки в стейте, фетчим запрос и уже с изменением поля с todos меняю isFetching обратно на false.

Всё работает как надо, но вопрос в следующем:
Когда в будущем саг с запросами на сервер станет больше и нам нужно будет каждый раз изменять состояние загрузки при запросе, нужно будет каждый раз вызывать метод put в саге-воркере ?

Есть ли способ не дублировать этот метод ?
  • Вопрос задан
  • 44 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы