Lidando com Efeitos Colaterais com Redux Saga @filipebarcos 

Redux 

"Evolui ideias do Flux, mas evita suas complexidades pegando dicas do Elm" — github.com/reactjs/redux Redux 

Redux UI Reducer Store Action dispatched (currentState, action) => newState New State 

Redux UI Middleware Reducer Store Action dispatched (currentState, action) => newState New State Action forwarded Action dispatched 

Redux Saga 

github.com/redux-saga/redux-saga 

JavaScript Generator Functions* 

ES6 

Podemos paralisar a execução da função 

function* foo(x) { const y = 2 * (yield (x + 1)); const z = yield (y / 3); return (x + y + z); } var it = foo(5); // note: not sending anything into `next()` here console.log(it.next()); // { value:6, done:false } console.log(it.next(12)); // { value:8, done:false } console.log(it.next(13)); // { value:42, done:true } https://davidwalsh.name/es6-generators 

import { call, put } from 'redux-saga/effects'; export function* fetchData(action) { try { const data = yield call(Api.fetchUser, action.payload.url); yield put({type: "FETCH_SUCCEEDED", data}); } catch (error) { yield put({type: "FETCH_FAILED", error}); } } function* watchFetchData() { yield takeEvery('FETCH_REQUESTED', fetchData); } https://redux-saga.github.io/redux-saga/docs/basics/UsingSagaHelpers.html 

import { takeEvery } from 'redux-saga'; // FETCH_USERS function* fetchUsers(action) { ... } // CREATE_USER function* createUser(action) { ... } // use them in parallel export default function* rootSaga() { yield takeEvery('FETCH_USERS', fetchUsers); yield takeEvery('CREATE_USER', createUser); } https://redux-saga.github.io/redux-saga/docs/basics/UsingSagaHelpers.html 

github.com/filipebarcos/redux-saga-example 

gist.github.com/filipebarcos/ 0a137d6ca837c117f999958a365fc5b6 

Obrigado. @filipebarcos