公喝错春药让我高潮,日韩有码中文字幕av,jizzjizz少妇亚洲水多

react系列筆記：第二記-中間件

中間件所做的事情就是在action發(fā)起后，到reducer之前做擴(kuò)展，實(shí)現(xiàn)的方式是對(duì)store的dispatch進(jìn)行包裝

store.dispatch => 【middlewales】 => return new store.dispatch

所以從上面所知，middlewales是需要接受store的dispatch為參數(shù)的，為了進(jìn)行state的一些操作比如跟蹤state變化，則把getState也一同傳入

　　middlewales(store.dispatch,store.getState) = > return new dispatch

然后applyMiddleWales基本上做了一件事就是遍歷了middlewales

　　applyMiddleWales(store,[middlewals1,.....]) => return new store.dispatch

官網(wǎng)上也在實(shí)現(xiàn)上分了兩步進(jìn)行解釋大致的實(shí)現(xiàn)

第一部分：這個(gè)比較簡單，就是把store傳下去，然后把dispatch重新返回來，當(dāng)然在這之間可以做些什么再返回來，比如添加log,捕獲錯(cuò)誤等

const logger1 =(store) => {
  const next = store.dispatch
  return (action)=>{
    console.log('log1---start')
    let o = next(action);
    console.log('log1---end')
    return o;
  }
}

const logger2 = (store) => {
  const next = store.dispatch;
  return (action) =>{
    console.log('log2----start');
    let o = next(action);
    console.log('log2-----end')
    return o;
  }
}

const store = {
    dispatch:()=>{console.log('dispatch----')}
}

function middle(store,wales){
  wales.forEach(item => {
    store.dispatch = item(store)
  })
}

middle(store,[logger1,logger2])

//打印：
//log2 --start
//log1--start
//dispacht
//log1--end
//log2--end

第二步：這里把middlewales的調(diào)用方式改變了一下，前面是middle(store) => return dispatch，這里是middls(store)(dispatch) => return dispatch

這么做的好處是不是直接在store身上直接去擴(kuò)展dispatch，而是把dispatch從源頭傳出來，然后返回新的dispatch，最后生成的也是store的一個(gè)副本。

const newLog1 = (store)=>{
    return (next) => {
        return (action) =>{
            console.log('newLog1---start')
            let o = next(action);
            console.log('newLog1---end');
            return o;
        }
    }
}

const newLog2 = (store)=>{
    return (next) => {
        return (action) =>{
            console.log('newLog2---start')
            let o = next(action);
            console.log('newLog2---end');
            return o;
        }
    }
}

newLog2(store);//此時(shí)這個(gè)返回的是一個(gè)函數(shù)，（next） => return (action)=>{}
newLog2(store)(store.dispatch)//此時(shí)返回的是一個(gè)函數(shù)  (action)=>{}

const newStore = {
    dispatch:() => console.log('newStore dispatch-----')
}
const newMiddle = (store,wales) =>{
    let dispatch = store.dispatch;
    wales.forEach(item => {
        dispatch = item(store)(dispatch);
    })
    return {...store,dispatch};
}
const ns = newMiddle(newStore,[newLog1,newLog2]);

posted on 2018-06-01 23:49 太上老俊閱讀(220) 評(píng)論(0) 收藏舉報(bào)

刷新頁面返回頂部

太上老俊

react系列筆記：第二記-中間件

導(dǎo)航

公告