zoukankan      html  css  js  c++  java
  • [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;
      }
    }

     

  • 相关阅读:
    学会用好 Visual Studio Code
    Alpha冲刺阶段博客汇总
    第二天敏捷冲刺
    第一天敏捷冲刺
    需求分析与设计
    软工网络15团队作业2——团队计划
    团队组队&灰化肥挥发会发黑
    Tomcat安装及部署
    正则表达式
    爬取腾讯疫情数据
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4993487.html
Copyright © 2011-2022 走看看