Intro

This study base on the 4.0.4 version of Redux, which is implemented by TypeScript.

index.ts

The entrance of the codes, providing all the components API.

isCrushed() used to discover current environment is developing or production environment .

if the code is compressed and under production environment , then isCrushed.name will be type of String but the name will be changed to others

First of All

Redux并不是全局state管理唯一的方案，基于开发不同的工程，我们可以选择三种方案来解决props传递的问题。

1. Hook
2. React Context API
3. and Redux

store

​ store 是本地state的集合，操作的state的都在里面，本地state指的是组件及其子组件的state.

reducer

​ reducer干的事很简单， 拿到一个state 和一个action返回 newstate

​ 我们可以总结为一个arrow funciton:

1

(state,action) => newState

reducer 需要一个初始状态，并且我们需要确保reducer在任何状态下都有state,缺失state的reducer是非常差劲的写法，初始状态示意如下

1
2
3

const initialState = {
	something:0,
}

In Project “File Reader” to present a file manager-like react based web page, we are facing a problem, as we required for all the files from server, the json file for 37000 files tooks server almost 6s to respond and then the web page, depend on the cpu speed, tooks almost 9s to render, that is almost 15s to wait for user.

This is not a good result, for further investigation, we use console.log("performance fetch"+(t1-t0)/1000) to check the performance in seconds to see each step takes how long to finish.

we can see the result

假设我们有一个组件

1
2
3
4
5
6
7
8
9

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.num}
      </button>
    );
  }
}

然后在另一个组件里调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

class Board extends React.Component {
  renderSquare(i) {
    return <Square num={i}/>;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}