What's Redux at all? • Predictable state container for JavaScript apps • Something like Flux that was originally created for >me traveling and hot reloading
3 principles of Redux 1. Express all the app state as a single Object (State) 2. You can update State only by dispatching Action, or rather a new State is created 3. State is updated by pure func)ons called Reducer, which always returns the same result for each set of arguments reducer : (State, Action) -> State
What's Redux Middleware • Do something befor/a2er dispatch call • You can receive an Action and do something with it: • Delay Action • Replace an Action to another one • Do asynchronous thing and dispatch the result as an Action • e.g. WSGI, Rack, Express, Koa, etc.
Example 2: Logging Log before and a,er dispatching an ac3on (next()) to the next middleware const logger = store => next => action => { console.log('prev state', store.getState()); console.log('action', action); const returnValue = next(action); console.log('next state', store.getState()); return returnValue; };
Example 3: Wait for the result of a Promise const promise = store => next => action => { if (typeof action.then === 'function') { return action.then(store.dispatch); } else { return next(action); } }; function fetchPosts() { return fetch('/posts').then(res => res.json()) .then(posts => ({ type: 'POSTS_FETCHED', posts })); } dispatch(fetchPosts);
What I want • ! Testability without mocking • " Control 7ming (thro9ling, debouncing) • # Cohesion of complex logic (wizard, etc.) • ✨ Ac7veness of development
Middlewares for asynchronous handling From my biased perspec/ve... | ----------------- | ---- | --------- | ---- | ---- | ---- | ---- | | name | star | from | test | time | cohe | acti | | ----------------- | ---- | --------- | ---- | ---- | ---- | ---- | | redux-thunk | 2392 | '15/07/13 | C | C | B | A | | redux-promise | 864 | '15/07/02 | - | C | C | C | | redux-saga | 3172 | '15/11/30 | B | A | A | A | | redux-loop | 641 | '16/01/06 | A | C | B | C | | redux-observable | 634 | '16/02/16 | C | A | B | A | | ----------------- | ---- | --------- | ---- | ---- | ---- | ---- | The numbers of ⭐ were recorded on June 5th, 2016
redux-thunk ⭐2392 • ! Requires mocking for tes2ng • " Hard to do debouncing because it takes ac2ons one by one • # Able to describe complex logic • ✨ Well maintained (actually only 13 lines of code!) • Reference: How to dispatch a Redux ac2on with a 2meout?
redux-promise ⭐864 Resolves a Promise payload of a FSA, Flux Standard Ac7on and dispatches the result function fetchItems() { const promise = fetch('/items').then(res => res.json()); return { type: 'FETCH_ITEMS', payload: promise }; } dispatch(fetchItems());
redux-promise ⭐864 • ! Too simple to test • " Can't do debouncing and etc. • # Too simple for complex logic • ✨ No commit in the last 4 months (only 25 lines of code though...) • A seemingly important MR for error handling has been merged but not released
redux-saga ⭐3172 • ! Super easy to test!!! • yields side effect requests, has the middleware to execute them, and receives the response • Able to describe complex asynchronous opera=ons while keeping them pure • See the upcoming talk by @kuy
redux-loop (store enhancer) ⭐641 API designed a,er Elm. reducer returns Effects in addi4on to state function beers(state = [], action) { switch (action.type) { case 'FETCH_BEERS': return loop(state, Effects.promise(fetchBeers)); case 'FETCH_BEERS_SUCCEEDED': return action.payload; default: return state; } }
redux-loop (store enhancer) ⭐641 • ! Mock-free tes-ng • Effects are plain Objects. Side effects won't happen un-l executed • " hard to do debouncing and etc. • # Composable Effects • ✨ Not maintained for 3 months. The author has completely moved to the Elm world?
redux-observable ⭐ 634 • ! Needs mocking to test epics • " Able to control 4me by Rx's powerful operators • # Progressed into background processor style like redux-saga • Able to express complex procedure • ✨ Being ac4vely developed and super simple source code • Rx is fun to use!