Redux and Angular 1.x

Bob Bijvoet

Front-end Chapter Lead

Building Blocks 1

Problems with application state today

Looking at the future

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

//State
{
     items:[],
     done:true
}

Actions

 

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

//Action
{
     type:'SOME_ACTION',
     payload:{}
}


//Example
{
     type:'ADD_TO_CART',
     payload:{
        id:1,
        price:42
     }
}

Reducers

 Responsible for mutating the store state when actions are dispatched

reducer(state, action) {
     switch (action.type) {
          case 'SOME_ACTION':
          //Mutate state
     }
     return state;
}


reducer(state, action) {
     switch (action.type) {
          case 'ADD_TO_CART':
              cart.push(action.payload)
          break;  
     }
     return state;
}

Middleware

Provides the ability to create functions that extend the library.

Container

  • Are concerned with how things work.
  • May contain both presentational and container components.
  • Provide the data and behavior to presentational or other container components.
  • Are often stateful, as they tend to serve as data sources.

Presentational

  • Are concerned with how things look.
  • Don’t specify how the data is loaded or mutated.
  • Rarely have their own state (when they do, it’s UI state rather than data).

Component architecture

Component architecture

Sprint app

State

State

sprint:{
    number: 0,
    burnedPoints: 0,
    done:false
};

stories:[{
    id:'1'
    points:1,
    description:'',
    done:false  
}]

Actions

{
    type: 'STORY_DONE',
    payload: {
        id: story.id,
        points:story.points
    }
};

{
    type:'SPRINT_DONE'
};

Actions

function storyDone(story) {
    return {
        type: 'STORY_DONE',
        payload: {
            id: story.id,
            points:story.points
        }
    };
}

Action creator

Reducer

//Stories reducer

case 'STORY_DONE':
    var story = state.find(function(story) {
       return story.id === action.payload.id;
    });

    if (story) {
        story.done = true;
    }


//Sprint reducer

case 'STORY_DONE':
    state.burnedPoints += action.payload.points;

    break;
case 'SPRINT_DONE':
    state.done = true;

Reducer

Middleware

Middleware

Promise middleware

//Action
{
    type: 'FETCH_SPRINT',
    payload: {
        promise: mainService.getSprint()
}

//Results in actions:
//FETCH_SPRINT_PENDING 
//FETCH_SPRINT_FULFILLED or FETCH_SPRINT_REJECTED 

//Stories reducer

case 'FETCH_SPRINT_FULFILLED':
    state = action.payload.stories;

Middleware

- thunk middleware

- logging middleware

$ngRedux

Redux bindings for Angular 1.x

Application source

Benefits

  • One place for state
  • One place for app logic
  • Clear list of actions
  • Asynchronous state representation
  • Powerful middleware and easy debugging
  • Easily testable

Testing

Goodies

Let's start hacking

Switch to ing-assignment branch

 

https://github.com/bobbijvoet/ng-redux-session

Made with Slides.com