Redux & RFP

Redux is a FLUX inspired architecture, which introduces simple concepts of an uni-directional single state store. Since the library is influenced by the Reactive Functional Programming paradigm (RFP), it may seem daunting for newcomers to understand. This talk focuses on the very basics of Redux and how to use it with the view library React.js. Also, the talk will give some practical insights of how the library is utilized by showing off a simple game.

Transcript

1. Redux and RFP Patrick Stapfer @ryyppy JavaScript-Engineer / Runtastic March 3rd, 2016 = Stahlstadt.js Linz
2. Redux • Kind of a big deal now in the ReactJS community • It’s a library inspired by the Facebook FLUX architecture • Leverages a declarative API (Reactive Functional Programming) • IT IS INDEPENDENT FROM REACT-JS !
3. FLUX • Uni-directional data flow • Observable Store manages (application) state • View subscribes to Store changes (re-render) • Action objects “describe” state changes in the Store • Dispatcher hands actions to the Store Declarative Architecture (Reactive FP)
4. Functional Concepts
5. What are we used to? OOP pattern / idiom • Single Responsibility Principle • Open/Closed Principle • Dependency Inversion Principle • Interface Segregation Principle • Interface Segregation Principle • Factory pattern • Strategy pattern • Decorator pattern • Visitor pattern FP equivalent • Functions • Function • Functions, also • Functions • Functions again • Functions, whatcha doin?! • Stahp • … * * This joke was stolen from Daniel Steigerwald, who stole it from Scott Wlaschin ;-)
6. FP terminology (explained by a n00b) A function taking a function as calculation input and returning a new function fUg(x) => f(x).g(x) = f(g(x)) Never change the value of an created object: const changed = imObj.set(‘foo’, 1); Higher Order Function: Composable Function: Immutability Principle: Pure Function: A function without side-effects (IO / http)
7. Redux Architecture
8. Let’s build a game! (Redux-WordGL) <App> {if game is started: } <Board rows={rows} width={width} height={height} /> {/if} </App>
9. Redux Architecture Action-Creator Store Reducer state dispatch(action) async-code - Thunks - Sagas - Middleware Components new state (state, action) action interaction triggers emit changes
10. Redux Setup (React.js) 1) Initialize a Redux Store with an inital value and reducer 2) Compose Components to Containers by using redux’ connect() 3) Create a Provider, which injects the state into the Container 4) Provide View Components with props
11. Changes: { game: { board: {...}, started: false, finished: false } } Action-Creator startGame(board) State (in Store) { game: { board: { rows: [], width: 5, height: 5 }, started: false, finished: false } } dispatch(action) gameReducer(state, action) { type: ‘START_GAME’, board: {...} } App-Container user clicks “start game” function gameReducer( state, action) { switch (action.type) { case START_GAME: { const board = fromJS( action.board); return state .set('board', board) .set('score', 0) .set('started', true) .set('paused', false) .set('finished', false); } default: { return state; } } getState() replace state notify changes
12. What about side-effects (async http, etc.)? • Redux middleware (easily chainable like in express): ◦ Redux-Thunks OR ◦ Redux-Sagas ◦ Write your own one (it’s easy!) const logMiddleware = ({getState, dispatch}) => (next) => (action) => { console.log('-----------------------'); console.log(`Dispatched Action: ${action.type}`); console.log('-----------------------'); return next(action); }; const enhancer = compose(applyMiddleware(logMiddleware)); const store = createStore(myReducer, myInitState, enhancer);
13. Sum things up (again) • Store: encapsulates dispatch, getState & reducer) • reducer(state, action): Pure function creating new states via action • dispatch(action): Dispatches actions to reducer • React-Components(props): Render props as HTML • React-Container(props): Connect input -props- to Components
14. Why / how do we use this @ Runtastic? • Currently used with React-Native (see other talk) • A lot of synergies with the JSON-API standard (data normalization, etc.) • Global Store State eliminates side-effects between controllers • Easier & more fun to test => less mocking => more pure functions • Redux’ API is SUPER SIMPLE • Easy to replace, if everything goes wrong
15. Similar Technologies
16. RxJS Elm Cycle.js (EventEmitters)
17. Questions? @ryyppy p.stapfer@deadlock.at
18. We are hiring! https://www.runtastic.com/jobs
19. • The official FLUX architecture docs • Redux Video Tutorial by Dan Abramov, the creator of Redux • Functional Programming Resources (different platforms, same concept) ◦ NDC - FP design patterns by Scott Wlashin ◦ FP @ NSConf2015 ◦ The Elm Architecture • Source code used in this presentation ◦ My Redux-WordGL implementation • Other neat things to know ◦ Flowtype Static JS Type Checker ◦ ImmutableJS - Immutable Structures in JS Appendix: References