Автор оригинала: Rajjeet Phull.
Не было времени? Клонировать репо и пойти!
git clone https://github.com/rajjeet/react-playbook cd react-playbook/packages/redux-saga npm install npm start
Быстрая установка
Оформить заказ моих предыдущих статей для кода установки:
Шаг 1: Установить redux-saga
npm install redux-saga
Шаг 2: Импортируйте библиотеки
/src/configure-store.js.
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import "regenerator-runtime/runtime";
...
ApplyMiddleware Это функция помощника, которая добавляет функциональность нашему redux ‘s Отправка функция.
Экспорт по умолчанию Redux-Saga называется CreateSagamiddleware Здесь находится фабрика, которая создает экземпляр промежуточного программного обеспечения.
Регенератор-время выполнения/время выполнения импортируется, чтобы допустить асинхронизированные действия, которые будут передаваться Babel без каких-либо проблем. Если эта строка опущена, ваше приложение с помощью следующих сообщений об ошибке: Uncaught ShareError: RegeneratorRuntime не определен Отказ Вот …| Выпуск GitHub , если вы заинтересованы в деталях.
Шаг 3: Создайте корневую сагу
/src/configure-store.js.
function* exampleSaga() {
console.log("Example saga reached");
}
Сага являются просто генераторными функциями. В отличие от нормальных функций, которые запускаются к завершению, генераторы могут приостановить их выполнения для асинхронизации операторов, используя доходность ключевое слово.
Как и корневой редуктор (первый аргумент Createstore ), эта сага действует как корня дерева, где каждое дерево будет другим саги. Это позволяет нам подложить наши саги и редукторы возле компонентов, которые их используют. Он также поддерживает их управляемыми, потому что они содержат только код, относящийся к близлежащим файлам.
В нашем случае ЭКСУМСАГААГА это просто нормальная функция, которая выполняет один раз и завершает. Мы рассмотрим использование генераторов в учебных пособиях латера.
Шаг 4: Создание экземпляра промежуточного программного обеспечения Saga
/src/configure-store.js.
const sagaMiddleware = createSagaMiddleware();
Выполнить нашу Redux-Saga Импорт по умолчанию для получения экземпляра промежуточного программного обеспечения SAGA.
Шаг 5: Примените промежуточное программное обеспечение SAGA для Redux
/src/configure-store.js.
export const store = createStore(countReducer, applyMiddleware(sagaMiddleware));
Термин ApplyMiddleware (Sagamiddleware) Возвращает Хранить Enhancer Отказ Использование функции утилиты ApplyMiddleware Мы можем комбинировать несколько подразбов и вернуть один энхансер магазина. Createstore Принимает только один энхансер магазина, поэтому необходимость в ApplyMiddleware Отказ Мы бы использовали массив с ограниченными возможностями для нескольких подразгоний.
Шаг 6: Запустите сагу
/src/configure-store.js.
sagaMiddleware.run(exampleSaga);
Беги () Принимает генератор и пикирования процесса, который проходит на заднем плане. Как мы увидим в будущих учебных пособиях, из этого процесса мы можем создавать несколько процессов параллельно и выполнять множество связанных функций Redux. Также обратите внимание, что это необходимо запустить после нанесения промежуточного программного обеспечения SAGA.
Конфигурированный магазин Redux-Saga
Вот как выглядит наша конфигурация финального магазина после интеграции Redux-Saga Отказ
/src/configure-store.js.
import { createStore, applyMiddleware } from 'redux';
import { countReducer } from './counter/reducer';
import createSagaMiddleware from 'redux-saga';
import "regenerator-runtime/runtime";
function* exampleSaga() {
console.log("Example saga reached");
}
const sagaMiddleware = createSagaMiddleware();
export const store = createStore(countReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(exampleSaga);
Это просто, но голый минимум нам нужно, чтобы начать использовать Redux-Saga в нашем приложении. Посмотрите на будущее расширение к этому руководству, который погрузится глубже в Redux-Saga Особенности и использует.