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

UI

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

Actions

 

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

UI

//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

UI

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.

UI

</>

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?

Made with Slides.com