What's Redux Anyway?

Timothy McLane

iModules Software

Redux Overview

The What

The Why

The How

What is Redux?

Predictable state container
Inspired by Flux and Elm
Framework agnostic
Even Angular!

Why Redux?

Improve the dev cycle
Immediate feedback
No more constant reloading

Simplify the Flux Pattern

Actions, event emitters, multiple stores
Distilled for better understanding

Lots of free awesome

Like time travel!

And some more boring stuff...

Easy bug reproduction
Easy save/load of app state
Testability

How Redux?

Three Principles of Redux

A single source of truth
Read-only state
Pure functions

Three Important Parts of Redux

Store
Actions
Reducers

Redux Store

getState()

subscribe()

dispatch()

Actions

Describe an event
Very simple
A type property and a payload property
Built using Action Creators

Action Creators

Pure functions
ctor for actions
Resulting action is passed to dispatch()

Reducers

Pure functions
(state, action) => state

const changeState = (state, action) => {
    switch(action.type){
        case 'CHANGE_LETTERS':{
            return {...state, letters: action.letters};
        }
        default:
            return state;
    }
}

connect()

The magic behind react-redux
Connects our dumb components to state
Three helpers:
- mapStateToProps
- mapDispatchToProps
- mergeProps

const Component = ({name, handleOnClick}) => (
    <div>
        Hi! I'm {name}
        <button onClick={handleOnClick}>Say Hello!</button>
    </div>
)

const Component = ({name, handleOnClick}) => (
    <div>
        Hi! I'm {name}
        <button onClick={handleOnClick}>Say Hello!</button>
    </div>
)

const mapStateToProps = (stateProps, ownProps) => ({
    name: stateProps.component.name
})

const Component = ({name, handleOnClick}) => (
    <div>
        Hi! I'm {name}
        <button onClick={handleOnClick}>Say Hello!</button>
    </div>
)

const mapStateToProps = (stateProps, ownProps) => ({
    name: stateProps.component.name
})

const mapDispatchToProps = (dispatch, ownProps) => ({
    handleOnClick: (id) => dispatch(sayHello())
})

const Component = ({name, handleOnClick}) => (
    <div>
        Hi! I'm {name}
        <button onClick={handleOnClick}>Say Hello!</button>
    </div>
)

const mapStateToProps = (stateProps, ownProps) => ({
    name: stateProps.component.name
})

const mapDispatchToProps = (dispatch, ownProps) => ({
    handleOnClick: (id) => dispatch(sayHello())
})

const mergeProps = (stateProps, dispatchProps, ownProps) => ({
    ...stateProps, ...dispatchProps, ...ownProps
})

const Component = ({name, handleOnClick}) => (
    <div>
        Hi! I'm {name}
        <button onClick={handleOnClick}>Say Hello!</button>
    </div>
)

const mapStateToProps = (stateProps, ownProps) => ({
    name: stateProps.component.name
})

const mapDispatchToProps = (dispatch, ownProps) => ({
    handleOnClick: (id) => dispatch(sayHello())
})

const mergeProps = (stateProps, dispatchProps, ownProps) => ({
    ...stateProps, ...dispatchProps, ...ownProps
})

export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Component)

Now we get state!

No handling of subscribe, or unsubscribe, or getState, or any other nonsense. The connect() function just does it all for us!

Demos

Let's get our demo on and have some

(ctional) programming!

fun

What I didn't have time to cover

bindActionCreators()
Middleware
Thunk
Logging
Asynchronous methods
And so much more...

More Resources

Pluralsight: Cory House

Dan Abramov's courses on Egghead.io

Redux documentation @ redux.js.org