Redux and RFP Patrick Stapfer @ryyppy JavaScript-Engineer / Runtastic March 3rd, 2016 = Stahlstadt.js Linz 

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 ! 

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) 

Functional Concepts 

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 ;-) 

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) 

Redux Architecture 

Let’s build a game! (Redux-WordGL) {if game is started: } {/if} 

Redux Architecture Action-Creator Store Reducer state dispatch(action) async-code - Thunks - Sagas - Middleware Components new state (state, action) action interaction triggers emit changes 

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 

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 

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); 

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 

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 

Similar Technologies 

RxJS Elm Cycle.js (EventEmitters) 

Questions? @ryyppy [email protected] 

We are hiring! https://www.runtastic.com/jobs 

● 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