Redux Saga

Instalação

$ yarn add redux-saga

Modelo de Configuração

Arquivo exemplo src/store/modules/cart/sagas.js

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

import api from '../../../services/api';

import { addToCartSuccess } from './actions';

function* addToCart({ id }) {   // O asterisco seria como um "async function addToCart"
  const response = yield call(api.get, `/products/${id}`); // O yield seria como um "await call"

  yield put(addToCartSuccess(response.data));
}

export default all([takeLatest('@cart/ADD_REQUEST', addToCart)]);

Arquivo de configuração do Redux

Arquivo src/store/index.js

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

import rootReducer from './modules/rootReducer';
import rootSaga from './modules/rootSaga';

const sagaMiddleware = createSagaMiddleware();

const enhancer =
  process.env.NODE_ENV === 'development'
    ? compose(console.tron.createEnhancer(), applyMiddleware(sagaMiddleware))
    : applyMiddleware(sagaMiddleware);

const store = createStore(rootReducer, enhancer);

sagaMiddleware.run(rootSaga);

export default store;

Navegação

History

Instalação

$ yarn add history

Arquivo service/history.js

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

export default history;

Arquivo App.js

A importação BrowserRouter vira apenas Router

import { Router } from 'react-router-dom';

Importação da configuração de serviço do history

import history from './services/history';

Substituição dos BrowserRouter por router passando o parâmetro history

<Router history={history}>
...
</Router>