Redux and Polymer

Bob Bijvoet

Front-end Chapter Lead at ING

Via FrontMen

Problems with application state today

A predictable state container for JavaScript apps.

Single source of truth

The state of your whole application is stored in an object tree within a single store.

State is read-only

The only way to mutate the state is to emit an action, an object describing what happened.

Changes are made with pure functions

To specify how the state tree is transformed by actions, you write pure reducers.

Pure function

Given the same input, will always return the same output.
Produces no side effects.
Relies on no external state.

Store

The place where all your application state lives

//Cart
{
    products:[],
    totalItems:0
}

Actions

Tells store that something happened and that the store should update itself in response.

//Add
{
     type:'ADD_ITEM',
     payload:{
        id:1,
        name:'Book'
     }
}

//Remove
{
     type:'REMOVE_ITEM',
     payload:{
        id:1
     }
}

Reducers

Responsible for mutating the store state when actions are dispatched

reducer(state, action) {
     switch (action.type) {
          case 'ADD_ITEM':
              var cart = [...state.cart];
              cart.push(action.payload)
              return Object.assign({}, state, {cart});
          break;  

          case 'REMOVE_ITEM':
              ...
              return Object.assign({}, state);    
     }
     
}

Middleware

Provides the ability to create functions that extend the library.

</>

Benefits

One place for state
One place for app logic
Clear list of actions
Powerful middleware and easy debugging
Easily testable
Async state representation
Use actions for analytics

Goodies

Thanks

Questions?