using redux

Download Using redux

Post on 06-Jan-2017




0 download

Embed Size (px)


  • Using ReduxMaximising development efficiency

  • Static websites

    Singe Page Applications


    Refresh page

    LiveReload CSS


    HMR (Hot Module Reload)

    JS (stateless components)

    HMR JS (everything)


    Why Redux is natural

  • Demo: Redux in

  • Performance, tooling, React

    Penthouse - critical css generator

    About me

    @pocketjoso pocketjoso

    Jonas Ohlsson - front end developer

  • Redux - overview redux usage in practice

    This talk

  • Predictable State container (evolution of Flux)

    One single immutable State

    Reducers instead of Stores

    Hot Module Reloading and Time travel

    Modular, tiny (2kb!)

    Follows Best practice

    What is Redux

  • Redux vs traditional Flux

    Action Reducer(Redux)Store ViewRedux


    Data flow

  • Todays example

    Dispatch action for new generate job

    Update State via reducer

    Receive State in Component

  • Action creatorAction Reducer Store View

    Returns actions; does not dispatch them

  • Write reducers instead of Stores Pure functions (state, action) => newState


  • ReducerAction Reducer Store View

  • Redux StoreAction Reducer Store View

  • Provider Connect

    ViewAction Reducer Store

    Redux using react-redux

    Data flow with react-redux

  • (Store) Provider

    Wraps whole App


    Makes Store available to components


  • ConnectConnect

    Injects props, subscribes to Store Keeps components Dumb


  • ConnectConnect View

    wont work - actionCreator does not dispatch action

  • ConnectConnect View

    Connect auto-injects dispatch to props

  • Connect

    2nd param creates self-dispatching action functions

    Connect View

  • write Reducers instead of Stores

    keep Components dumb using Connect

    benefit from: Hot Module Reloading

    Powerful DevTools

    Components easier to understand and test


  • Thats all!

  • Recommended packages

    Redux -

    React transform boilerplate (for Hot Module Reloading) -

    Redux DevTools -

    Redux resources

    Redux release and intro to Time travel -

    Best starting point for understanding redux - Free video tutorial on Redux by Dan Abramov (creator) -

    Written notes for above video tutorial -

    Official docs (great) -

    Redux slim in a gist -


  • Redux related resources

    Full stack Redux tutorial -

    Redux for state management -

    Full stack Redux boilerplate -

    Support for Functional Components in React Transform -

    Beyond just Redux for async actions -

    Other related resources

    Webpack (react docs) -

    Functional Stateless Components -