[Redux] Introduction

时间：2015-11-25 06:37:00 阅读：255 评论：0 收藏：0 [点我收藏+]

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;
  }
}

[Redux] Introduction

原文：http://www.cnblogs.com/Answer1215/p/4993487.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)