Блог

Я прочитал много руководств, касающихся «redux-saga», и понимаю, как структурировать мои редукторы и саги для непосредственного выполнения. Проблема, с которой я сталкиваюсь, заключается в том, что я не знаю, как на самом деле извлекать запрошенные данные таким образом, чтобы возвращать то, что я могу использовать. Что большинство людей используют для фактического извлечения запрошенных данных?

Вот моя сага о запросе:

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

export function* request(url, method, body) {
    try {
        const result = yield call(fetch, url, { method: method, body: body });
        return {err: null, res: result };
    } catch(error) {
        return {err: error, res: null };
    }
}
 

.. «Вызов yield(fetch …» возвращает ReadableStream в Chrome, и если я использую ‘isomorphic-fetch’, как я делал с redux-thunk, он возвращает обещание. Я не могу использовать обещание в функции генератора из того, что я вижу.

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

Итак, ответ, который все (или большинство) примеров в Интернете замалчивают, заключается в том, что мне нужно разрешить обещание в функции-оболочке, а затем я могу использовать генератор, как и ожидалось. Следуя приведенному здесь примеру:

Создание галереи изображений с использованием react, redux и redux-saga

Я разделил свой генератор запросов на два отдельных метода и полностью разрешил обещание в вспомогательной функции. Конечный результат выглядит следующим образом:

 import { call } from 'redux-saga/effects';
import fetch from 'isomorphic-fetch';

const actualRequest = (method, url, body) => {
    return fetch(url, { method: method, body: body })
        .then( response => response.json()
        .then( json => json ));
}

export function* request(method, url, body) {
    try {
        const result = yield call(actualRequest, method, url, body);
        return {err: null, res: result };
    } catch(error) {
        return {err: error, res: null };
    }
}
 

Это по-прежнему позволяет мне использовать «изоморфную выборку», как и раньше, но все равно превращает ее в сагу.