Lidando com Efeitos Colaterais com Redux Saga

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. Pausa Dramática
6. O que é uma Função Pura?
7. "É uma função em que seus parâmetros são a única coisa que influenciam no seu valor de retorno"
8. "É uma função em que seus parâmetros são a única coisa que influenciam no seu valor de retorno" — eu
9. Redux UI Reducer Store Action dispatched (currentState, action) => newState New State
10. Redux UI Middleware Reducer Store Action dispatched (currentState, action) => newState New State Action forwarded Action dispatched
11. Redux Saga
12. github.com/redux-saga/redux-saga
13. E o que é uma “Saga”?
15. “…a sequence of transactions that can be interleaved with other transactions.” http://www.cs.cornell.edu/andru/cs711/2002fa/reading/sagas.pdf — Hector Garcia-Molina e Kenneth Salem
16. “…a sequence of transactions that can be interleaved with other transactions.” http://www.cs.cornell.edu/andru/cs711/2002fa/reading/sagas.pdf — Hector Garcia-Molina e Kenneth Salem
17. “…a saga is like a separate thread in your application that's solely responsible for side effects.” — https://github.com/redux-saga/redux-saga
18. Como eu é possível parar uma execução de uma função em JS?
19. JS Generator Functions*
20. ES6 Feature
21. https://davidwalsh.name/es6-generators http://2ality.com/2015/03/es6-generators.html
22. https://davidwalsh.name/es6-generators function* foo(x) { const y = 2 * (yield (x + 1)); const z = yield (y / 3); return (x + y + z); } const 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 }
23. Alguns exemplos
24. https://redux-saga.github.io/redux-saga/docs/basics/UsingSagaHelpers.html 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); }
25. 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); }
26. E os testes?
27. 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
28. 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
29. { CALL: { fn: Api.fetchUser, args: [“/users”], }, }
30. const generator = fetchData(); expect(generator.next()).toEqual({ done: false, value: call(Api.fetchUser, action.payload.url) });
31. Tá, mas e aí?
32. redux-saga === redux-thunk + testabilidade
35. Ações Futuras
36. take x takeEvery
37. function* watchThis() { yield takeEvery('THIS', doThat); }
38. function* watchThis() { while(true) { yield take('THIS', doThat); } }
39. function* watchDeaths() { yield take('DIE', newTry); yield take('DIE', newTry); yield take('DIE', put, { type: 'GAME_OVER' }); }
40. Chamadas “não-bloqueantes”
41. fork
42. function* mySaga() { while(true) { yield take(''); yield call(foo); yield call(bar); } }
43. function* mySaga() { while(true) { yield take(''); yield fork(foo); yield fork(bar); } }
44. Executar tarefas em paralelo
45. const [visits, registrations] = yield all([ call(fetch, '/visits'), call(fetch, '/registrations') ]);
46. Corrida entre efeitos colaterais
47. const { posts, timeout } = yield race({ posts: call(fetch, '/posts'), timeout: call(delay, 1000) });
48. Composição de Sagas
49. yield*
50. function* foo() { ... } function* bar() { ... } function* baz() { ... } function* fooBarBaz() { yield* foo(); yield* bar(); yield* baz(); }
51. tests?
52. tests?
53. function* foo() { ... } function* bar() { ... } function* baz() { ... } function* fooBarBaz() { yield call(foo); yield fork(bar); yield call(baz); }
54. Cancelamento de Tarefas
55. function* mySync() { try { while(true) { yield put({type: 'SYNC_STARTED'}); const result = yield call(syncMyFiles); yield call(delay, 500); } } finally { if (yield cancelled()) yield put({ type: 'SYNC_STOPED'}); } } function* myDropbox() { while(yield take('START_FILE_SYNC')) { const mySyncTask = yield fork(mySync); yield take('STOP_FILE_SYNC'); // this will cause the forked task to jump into its finally block yield cancel(mySyncTask); } }
56. gist.github.com/filipebarcos/ 0a137d6ca837c117f999958a365fc5b6
57. Obrigado. @filipebarcos