Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Redux & RFP

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.

Patrick Stapfer

March 09, 2016
Tweet

More Decks by Patrick Stapfer

Other Decks in Programming

Transcript

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

    View full-size slide

  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 !

    View full-size slide

  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)

    View full-size slide

  4. Functional Concepts

    View full-size slide

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

    View full-size slide

  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)

    View full-size slide

  7. Redux Architecture

    View full-size slide

  8. Let’s build a game! (Redux-WordGL)

    {if game is started: }
    rows={rows}
    width={width}
    height={height}
    />
    {/if}

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  15. Similar Technologies

    View full-size slide

  16. RxJS
    Elm
    Cycle.js
    (EventEmitters)

    View full-size slide

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

    View full-size slide

  18. ● 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

    View full-size slide