[Redux] Introduction

Single immutable state tree:

　　Should be just one single javascript object.

 

Describing the changes by action:

　　every change in the application state as a plain JavaScript object called “action”.

 

Pure Function & Impure Function:

Pure function always return the same result and no side effect.

Impure function, has side effect or return new function.

// Pure functions
function square(x) {
  return x * x;
}
function squareAll(items) {
  return items.map(square);
}

// Impure functions
function square(x) {
  updateXInDatabase(x);
  return x * x;
}
function squareAll(items) {
  for (let i = 0; i < items.length; i++) {
    items[i] = square(items[i]);
  }
}

 

The Reducer function:

　　The function should have a 'previous state', 'the action has been dispatched', '¨next state' and this function should be pure.

 

Writing a Counter Reducer with Tests

function counter(state, action) {
  
  if(typeof state === "undefined"){
    return 0;
  }
  
  if(action.type === "INCREASE"){
    state += 1;
    return state;
  }else if(action.type === "DECREASE"){
    state -= 1;
    return state;
  }else{
    return state;
  }
}

expect(
  counter(0, {type: 'INCREASE'})
).toEqual(1);

expect(
  counter(1, {type: 'INCREASE'})
).toEqual(2);

expect(
  counter(2, {type: 'DECREASE'})
).toEqual(1);

expect(
  counter(1, {type: 'DECREASE'})
).toEqual(0);

// If the action is unknown, should remain be the previsou state
expect(
  counter(1, {type: 'SOMETHING_ELSE'})
).toEqual(1);

// If the previous state is undefined, should return the initialize state
expect(
  counter(undefined, {})
).toEqual(0);

console.log("PASSED!");

 

Covert to ES6:

const counter = (state = 0, action) => {
 
  switch(action.type) {
    case "INCREASE:
      return state + 1;
    case "DECREASE":
      return state -1;
    default:
      return state;
  }
}