Redux-Saga é uma biblioteca de middleware que lida com tarefas assíncronas com efeitos colaterais, como API. Além disso, podemos ler o estado e chamar ações no Saga. Ele usa funções geradoras para realizar tarefas assíncronas.

O seguinte descreve por que usamos o Saga e como instalá-lo. Em seguida, são discutidos métodos úteis do Saga para lidar com a API.

Por que estamos usando o Redux-Saga?

O principal dever da Saga é lidar com as chamadas da API e atualizar o estado com base na resposta dos endpoints! Uma das principais vantagens do redux-saga é ser amigável ao teste.

Antes de trabalhar com o Redux-Saga, você deve estar familiarizado com o Redux.

Como instalar o Redux-saga?

Existem duas maneiras de instalar o redux-saga com base no seu gerenciador de pacotes:

npm install redux-saga

yarn add redux-saga

import { call, put, takeEvery } from 'redux-saga/effects'
import Api from '...'

function* fetchUser(action) {
    try {
        const user = yield call(Api.fetchUser, action.payload.userId);
        yield put({type: "USER_FETCH_SUCCEEDED", user: user});
    } catch (e) {
        yield put({type: "USER_FETCH_FAILED", message: e.message});
    }
}

function* mySaga() {
    yield takeEvery("USER_FETCH_REQUESTED", fetchUser);
}

export default mySaga;

A API pode ser algo assim:

import axios from 'axios';

const Api = {
    fetchUser: (userId) => {
        return axios.get(`...?userId=${userId}`)
    }
};

export default Api;

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

import reducer from './reducers'
import mySaga from './sagas'

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
    reducer,
    applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(mySaga);

Métodos de Saga

Os métodos mais utilizados serão explicados a seguir:

selecionar

Ele lê do seletor (estado), aqui está uma amostra da chamada de seleção.

const userId = yield select(userSelectors.getUserId);

Ele despacha ações, por exemplo:

yield put({type: "USER_FETCH_SUCCEEDED", user: user});

Ele chama uma função assíncrona, como API, por exemplo:

const user = yield call(Api.fetchUser, action.payload.userId);

Ele observa cada despacho de ação para chamar uma função geradora.

yield takeEvery("USER_FETCH_REQUESTED", fetchUser);

É o mesmo que takeEvery a única diferença é que quando a chamada anterior está pendente não chama novamente.

yield takeLatest("USER_FETCH_REQUESTED", fetchUser);

Redux-saga é uma biblioteca para lidar com tarefas assíncronas no redux. Neste artigo, é discutido por que e como usar o Saga e os métodos.