Pitch - Lidando com Efeitos Colaterais com Redux Saga

Pitch para palestrar no CEJS 2017.

Transcript

1. Lidando com Efeitos Colaterais com Redux Saga @filipebarcos
2. Redux
3. "Evolui ideias do Flux, mas evita suas complexidades pegando dicas do Elm" — github.com/reactjs/redux Redux
4. Redux UI Reducer Store Action dispatched (currentState, action) => newState New State
5. Redux UI Middleware Reducer Store Action dispatched (currentState, action) => newState New State Action forwarded Action dispatched
6. Redux Saga
7. github.com/redux-saga/redux-saga
8. JavaScript Generator Functions*
9. ES6
10. Podemos paralisar a execução da função
11. 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
12. 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
13. 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
14. github.com/filipebarcos/redux-saga-example
15. gist.github.com/filipebarcos/ 0a137d6ca837c117f999958a365fc5b6
16. Obrigado. @filipebarcos