React入门005之Redux是什么01

Redux

一个不错的Redux中文文档

- 建议直接看

示例

里面有个 Counter Vanilla示例

  • Vanilla是什么 (英文意思香草)

what

VanillaJS就代表 原生JS

因为有很多前端程序员上来就学框架，根本不懂底层原理只会用库或框架，于是很多人上手就学vue,此时让它用 原生他不会，于是有人为了嘲讽这些不会原生JS的人 发明了一个新的框架就叫 VanillaJS

Counter Vanilla就是 没有用任何的库(用redux结合原生JS)

我们的需求 实现几个按钮点击触发+1/-1的功能

初始化如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://cdn.bootcss.com/redux/4.0.1/redux.min.js"></script>
<div id="app"></div>
<script>
function render(){
    var app = document.querySelector('#app');
    app.innerHTML = `
    <div>
        你点击了<span id="value">0</span>次
        <div>
            <button id="add1">+1</button>
            <button id="add2">+2</button>
            <button id="add1IfOdd">如果单数就+1</button>
            <button id="addAfter2Ses">2秒后+1</button>
        </div>
    </div>
    `;
}
render();
</script>
</body>
</html>

用redux怎么做呢？

根据示例

  1. 我们第一步要创建一个store 存这个0
  2. 这个store需要接受一个参数(更新store的函数)。

  3. 这个参数是一个函数

    1
    2
    3
    4
    5
    6
    7
    8
    (接受两个参数)
    第一个是上一次 store的状态
    第二个是 具体的操作

    var store = Redux.createStroe(函数xx)
    function 函数xx(之前的状态,操作){
        return 新的状态
    }

  4. 这个函数是用来更新store的

  • step1 dispatch 派发一个action
  • step2 根据操作生成新的 state 触发一个事件
  • step3 接受 事件重新 render
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://cdn.bootcss.com/redux/4.0.1/redux.min.js"></script>
<div id="app"></div>
<script>
function add1(){
    // step1 dispatch 派发一个action
    // 触发一个事件
    // 派发一个动作
    store.dispatch({type:'add'})
}

function render(store){
    var app = document.querySelector('#app');
    app.innerHTML = `
    <div>
        你点击了<span id="value">${store.getState()}</span>次
        <div>
            <button id="add1" onclick="add1()">+1</button>
            <button id="add2">+2</button>
            <button id="add1IfOdd">如果单数就+1</button>
            <button id="addAfter2Ses">2秒后+1</button>
        </div>
    </div>
    `;
}

function stateChanger(state,action){ 
    if(state === undefined){
        return 0;
    }else{
        if(action.type === 'add'){
            var newState = state + 1;
            return newState;
            // step2 根据操作生成新的 state 触发一个事件
        }else{
            return state;
        }
    }
}
//初始化 store
var store = Redux.createStore(stateChanger)

render(store);

//监听 store的变化 然后触发render
store.subscribe(()=>{

    // step3 接受 事件重新 render
    render(store) 

})
</script>
</body>
</html>

store 和 state的关系

1
2
3
4
5
state    ------> store存储了 state
获取 state ------> store.getState()

store    ------> Redux.create(函数)
更新 state -----> 触发 action 也就是 dispatch({type:'操作'})

完善其他按钮的功能

  • 新增payload使用
  • 异步调用 action
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://cdn.bootcss.com/redux/4.0.1/redux.min.js"></script>
<div id="app"></div>
<script>
function add1(){
    store.dispatch({type:'add',payload:1})
}
function add2(){
    store.dispatch({type:'add',payload:2})
}

function add1IfOdd(){
    var oldState = store.getState()
    if(oldState % 2 ===1){
        store.dispatch({type:'add',payload:1})
    }
}

function addAfter2Ses(){
    setTimeout(() => {
        store.dispatch({type:'add',payload:1})
    }, 2000);
}

function render(store){
    var app = document.querySelector('#app');
    app.innerHTML = `
    <div>
        你点击了<span id="value">${store.getState()}</span>次
        <div>
            <button id="add1" onclick="add1()">+1</button>
            <button id="add2" onclick="add2()">+2</button>
            <button id="add1IfOdd" onclick="add1IfOdd()">如果单数就+1</button>
            <button id="addAfter2Ses" onclick="addAfter2Ses()">2秒后+1</button>
        </div>
    </div>
    `;
}

function stateChanger(state,action){ 
    if(state === undefined){
        return 0;
    }else{
        console.log('add')
        if(action.type === 'add'){
            var newState = state + action.payload;
            return newState;
            // step2 根据操作生成新的 state 触发一个事件
        }else{
            return state;
        }
    }
}
//初始化 store
var store = Redux.createStore(stateChanger)

render(store);

//监听 store的变化 然后触发render
store.subscribe(()=>{
    // step3 接受 事件重新 render
    render(store) 

})
</script>
</body>
</html>

  • 一个坑，就是异步更新 store的问题

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
31
32
33
// 新手经常犯的错误 ,把异步逻辑写在 
function asyncAdd2(){
    store.dispatch({type:'add2',payload:2})
}


function stateChanger(state,action){ 
    if(state === undefined){
        return 0;
    }else{
        if(action.type === 'add'){
            var newState = state + action.payload;
            return newState;
            // step2 根据操作生成新的 state 触发一个事件
        }else if(action.type ==='add2'){
             setTimeout(() => {
                var newState = state + action.payload;
                return newState;
            }, 2000);

            // 此时 setTimeout里函数的return是 箭头函数的返回值
            /*
            而这个 
            else if(action.type ==='add2'){
                //没写 return
                // 相当于 return undefined
            }
            */
        }else{
            return state;
        }
    }
}

代码仓库