Как организовать rest API с redux saga?

Question

[Артур]

Как лучше организовать структуру для rest api, которое будет написано через саги?

В моем понимании для каждого метода нужно создавать по 3 экшена (request, success, error) и шаблонные подобные саги,

import { call, put } from 'redux-saga/effects';

function* getUser(action) {
  yield put({ type: "GET_USER_REQUEST"});
  const users = yield call(getUser, action.payload.id)
  yield put({ type: "GET_USER_SUCCESS", user });
}

function* getUserWatcher() {
     yield takeEvery('GET_USER_REQUEST, getUser)
}

Получается очень большое разрастание однотипного кода, это так и реализуется? или есть какие-то удобные паттерны? или альтернтивные подходы?

Answer 1

[Игорь Стасюк]

Именно так оно и реализуется. И кочнечно если в будущем вы планируете огромный веб магазин, ну или просто большое веб приложение со сложной структурой, то redux-saga подход окупается. Иначе можно ограничится тем же redux-thunk

Comments

[Артур]

А как обрабатывать например такой кейс с таким подходом.

Есть страница на которой 2 компонента.
1. Лента со списком имен юзеров.
2. Селект со списком имен юзеров.

При первом заходе мы загружаем всех юзеров с бека в ленту (getUsers), показываем прелоадер в ленте пока грузим, потом отображаем.

При выборе селекта мы делаем отдельно повторный запрос (getUsers), чтобы получить обновленный список имен юзеров (их могло стать больше на беке, нужны актуальные данные в селекте). Но нам не нужно обновлять ленту юзеров и показывать прелоадрер в ленте, а только в селекте.

Получается что нужно дублировать сагу и кусок стора? т.к лента следит за состоянием getUsers loading (true/false) и селект следит тоже.

или как еще такое решается?

[Игорь Стасюк]

Нет дернуть тот же экшн на подгрузку, просто preloader сделать по условию: по типу isShowingPreloader && this.preloader.show() и все. isShowingPreloader диспатчить в сам action и задать для него значение по умолчанию.