redux精品先导课程—05redux-thunk中间件

桃扇骨 2022-03-10 12:58 222阅读 0赞

首先安装redux-thunk这个插件

> npm i -S redux-thunk

然后再重启服务器：node ser

首先执行下面操作，激活thunk

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][] \\

然后添加这些代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4][]

完整代码如下所示

import { createStore, applyMiddleware } from 'redux';
    import thunk from 'redux-thunk';
    
    let $addCounter = $('.counterBox .addCounter');
    let $counterPanrl = $('.counterBox .counterPanel');
    let $hasAll = $('.allSel .val');
    let $maximum = $('.maximum .val');
    let $allCount = $('.allCount .val');
    
    let initState = []
    function counter(state=[],action){
        let {type,id}=action;
    
        switch (type) {
            case 'ADD_COUNTER':
                return [...state,{
                    id:new Date().getTime(),
                    value:0
                }]
            case 'INCREMENT':
                return state.map(elt=>{
                    if(elt.id === id){
                        elt.value++;
                    }
                    return elt;
                })
            case 'DECREMENT':
                return state.map(elt=>{
                    if(elt.id === id){
                        elt.value--;
                    }
                    return elt;
                })
            default:
                return state;
        }
    }
    
    let store = createStore(counter,[],applyMiddleware(thunk));
    
    class Counter{
        constructor(store, {id,value}){
            debugger;
            this.value = value;
            this.counters = store;
            this.store = store;
            this.id = id;
            this.elt = $('<div class="counter"></div>');
    
            let incrementBtn = this.incrementBtn = $('<button class="add"></button>');
            let decrementBtn = this.decrementBtn = $('<button class="sub"></button>');
            let oddBtn = this.oddBtn = $('<button class="addIfOdd"></button>');
            let asyncBtn = this.asyncBtn = $('<button class="addAsync"></button>');
            let num = this.num = $(`<span>${this.value}</span>`);
    
            this.elt.append(decrementBtn,num,incrementBtn,oddBtn,asyncBtn);
            this.decrement = this.decrement.bind(this);
            this.increment = this.increment.bind(this);
            this.addIfOdd = this.addIfOdd.bind(this);
            this.asyncAdd = this.asyncAdd.bind(this);
    
            incrementBtn.click(this.increment);
            decrementBtn.click(this.decrement);
            oddBtn.click(this.addIfOdd);
            asyncBtn.click(this.asyncAdd);
        }
    
        decrement(){
            if(this.value === 0) return
            boundDecrement(this.id)
        }
    
        increment(){
            this.num.html(++this.value);
            boundIncrement(this.id)
        }
    
    
    
        addIfOdd(){
            boundAddIfOdd(this.id,this.value);
        }
    
        asyncAdd(){
            boundAsyncAdd(this.id);
        }
    }
    
    function increment(id){
        return {type: 'INCREMENT',id:id}
    }
    function decrement(id){
        return {type: 'DECREMENT',id:id}
    }
    function addIfOdd(id,value){
        return function(dispatch,getState) {
            if(value%2 === 0) return
            dispatch(increment(id))
        }
    }
    
    // 另外一种写法
    const asyncAdd = id => () =>{
        setTimeout(()=>{
            boundIncrement(id)
        },1000)
    }
    
    const boundIncrement = (id) => store.dispatch(increment(id));
    const boundDecrement = (id) => store.dispatch(decrement(id));
    const boundAddIfOdd = (id) => store.dispatch(addIfOdd(id));
    const boundAsyncAdd = (id) => store.dispatch(asyncAdd(id));
    
    $addCounter.click(ev=>{
        store.dispatch({ type: 'ADD_COUNTER' })
    })
    
    store.subscribe(()=>{
        let state = store.getState();
        $counterPanrl.html('');
        state.forEach(data=>{
            $counterPanrl.append(new Counter(store,data).elt) 
        });
    
        $hasAll.html(state.every(elt=> elt.value !==0)+'');
        $maximum.html(state.slice().sort((a,b)=>{
            b.value-a.value
        })[0].value)
        $allCount.html(state.reduce((accu,elt)=> accu+elt.value,0))
    })

结合下面这张图理解

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 5][]

以上就是redux-thunk中间件的全部内容

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220310/ad5698aa11214758a99534153f0be5c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220310/2f0d89d82a4048b6b3dc3a79b326637a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220310/374bcf2adedf404d8426245435d97abb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20220310/d0c8c3f320584e368bdc64317065e3d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4]: /images/20220310/a745176c97d440b38b624f209438c7e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 5]: /images/20220310/c735aa88876e4b2f905d21773ea649f9.png