Как использовать Redux Sagas для загрузки одного объекта? - PullRequest
Новая
       72

Как использовать Redux Sagas для загрузки одного объекта?

0 голосов
/ 09 мая 2020

Я работал над реакционным проектом, используя redux и sagas. До сих пор мне удалось создать структуру, в которой мой компонент будет отправлять действие, запрашивающее список, затем sagas выполняет это действие и вызывает функцию, которая отправит запрос на бэкэнд. Затем я сохраняю этот список на redux, и мой компонент читает список из redux.

Теперь мне нужно загрузить один объект из бэкэнда. Я думал о том, чтобы не использовать саги для этого запроса, но я думаю, имеет смысл сделать этот запрос, используя саги и сохраняя этот единственный объект на redux.

Я не могу понять, как сделать функцию rootSaga принять мою функцию с параметром 'id'.

Чтобы проиллюстрировать сценарий, вот некоторый код:

это функция root саги, это сделает запрос API и вызовет действие для сохранения на redux 

export function* loadEvent({ id: number }) {
  try {
    console.log('load single event');

    yield put(loadEventSuccess(event));
  } catch (err) {
    yield put(loadFailure());
  }
}

Это функция rootSaga, которая должна получить действие, которое я отправил, и запустить мою функцию саги. Проблема в том, что мне не разрешается вызывать функцию с параметром. Даже если бы я мог, я не знаю, как передать ему параметр. 

export default function* rootSaga() {
  return yield all([
    takeLatest(EventsTypes.LOAD_EVENT_REQUEST, loadEvent),
  ]);
}

Конечно, перед всем этим есть действие, которое я отправил из моего функционального компонента.

Еще одна вещь, которая сбивает меня с толку, это то, подходит ли тот подход, который я использовал. Я мог бы сделать этот запрос из своего функционального компонента и сохранить данные в его состоянии. Поступая так, я бы не стал прибегать к редукциям или сагам. Был бы в этом смысл?

1 Ответ

2 голосов
/ 09 мая 2020

Ваш подход совершенно правильный, так как вы должны попытаться заставить каждый вызов api отбрасывать свои саги, но вы только что сделали небольшую ошибку 

function* loadEvent({ payload }) {
const { id } = payload;
  try {
    const response = yield call(api.get, `localhost:4000/api/${id}`);
    yield put(loadEventSuccess(event));
  } catch (err) {
    yield put(loadFailure());
  }
};

Вам также не нужно экспортировать функции генератора, и в моем примере я имитирую вызов api get, используя ax ios. И не забудьте import { call } from "redux-saga/effects";

...