推薦使用並手寫實現redux-actions原理

前端陽光發表於2020-12-29

Redux

一、前言

為什麼介紹redux-actions呢?

第一次見到主要是接手公司原有的專案，發現有之前的大佬在處理redux的時候引入了它。

發現也確實使得在對redux的處理上方便了許多，而我為了更好地使用一個元件或者外掛，都會去去嘗試閱讀原始碼並寫成文章，這個也不例外。

發現也確實有意思，推薦大家使用redux的時候也引入redux-actions

在這裡就介紹一下其使用方式，並且自己手寫實現一個簡單的redux-actions

二、介紹

在學習 redux 中，總覺得 action 和 reducer 的程式碼過於呆板，比如

2.1 建立action

let increment = ()=>({type:"increment"})

2.2 reducer

let reducer = (state,action)=>{
    switch(action.type){
      case "increment":return {count:state.count+1};break;
      case "decrement":return {count:state.count-1};break;
      default:return state;
    }
}

2.3 觸發action

dispatch(increment())

綜上所示，我們難免會覺得 increment 和 reducer 做一個小 demo 還行，遇到邏輯偏複雜的專案後，專案管理維護就呈現弊端了。所以最後的方式就是將它們獨立出來，同時在 reducer 中給與開發者更多的主動權，不能僅停留在數字的增增減減。

redux-actions主要函式有createAction、createActions、handleAction、handleActions、combineActions。

基本上就是隻有用到createAction，handleActions，handleAction

所以這裡我們就只討論這三個個。

三、認識與手寫createAction()

3.1 用法

一般建立Action方式:

let increment = ()=>({type:"increment"})
let incrementObj = increment();// { type:"increment"}

使用createAction 建立 action

import { createAction } from 'redux-actions';
const increment = createAction('increment');
let incrementObj = increment();// { type:"increment"}
let objincrement = increment(10);// {type:"increment",paylaod:10}

我們可以看到

let increment = ()=>({type:"increment"})
let incrementObj = increment();// { type:"increment"}

與

const increment = createAction('increment');
let incrementObj = increment();// { type:"increment"}

是等效的，那為什麼不直接用傳統方式呢?

不難發現有兩點：

傳統方式，需要自己寫個函式來返回incrementObj，而利用封裝好的createAtion就不用自己寫函式
傳統方式，在返回的incrementObj若是有payload需要自己新增上去，這是多麼麻煩的事情啊，你看下面的程式碼，如此的不方便。但是用了createAction返回的increment，我們新增上payload，十分簡單，直接傳個引數，它就直接把它作為payload的值了。

let increment = ()=>({type:"increment"，payload:123})

3.2 原理實現

我們先實現個簡單，值傳入 type引數的，也就是實現下面這段程式碼的功能

const increment = createAction('increment');
let incrementObj = increment();// { type:"increment"}

我們發現createAction('increment')()才返回最終的action物件。這不就是個柯里化函式嗎?

所以我們可以非常簡單的寫出來，如下面程式碼所示，我們把type型別當作action物件的一個屬性了

function createAction(type) {
    return () => {
        const action = {
            type
        };
        return action;
    };
}

好了現在，現在實現下面這個功能，也就是有payload的情況

const increment = createAction('increment');
let objincrement = increment(10);// {type:"increment",paylaod:10}

很明顯，這個payload是 在createAction('increment')返回的函式的引數，所以我們輕而易舉地給action新增上了payload。

function createAction(type) {
    return (payload) => {
        const action = {
            type,
            payload
        };
        return action;
    };
}

但是像第一種情況我們是不傳payload的，也就是說返回的action是不希望帶有payload的，但是這裡我們寫成這樣就是預設一定要傳入payload的了。

所以我們需要新增個判斷，當不傳payload的時候，action就不新增payload屬性。

function createAction(type) {
    return (payload) => {
        const action = {
            type,
        };
        if(payload !== undefined){
            action.payload = payload
        }
        return action;
    };
}

在實際專案中我更喜歡下面這種寫法，但它是等價於上面這種寫法的

function createAction(type) {
    return (payload) => {
        const action = {
            type,
            ...payload?{payload}:{}
        };
        return action;
    };
}

其實createAction的引數除了type，還可以傳入一個回撥函式，這個函式表示對payload的處理。

const increment = createAction('increment');
let objincrement = increment(10);// {type:"increment",paylaod:10}

像上面的程式碼所示，我們希望的是傳入10之後是返回的action中的payload是我們傳入的2倍數

const increment = createAction('increment',(t)=> t * 2);
let objincrement = increment(10);// {type:"increment",paylaod:20}

現在，就讓我們實現一下。

function createAction(type,payloadCreator) {
    return (payload) => {
        const action = {
            type,
        };
        if(payload !== undefined){
            action.payload = payloadCreator(payload)
        }
        return action;
    };
}

臥槽，太簡單了吧！但是我們又犯了前邊同樣的錯誤，就是我們使用createAction的時候，不一定會傳入payloadCreator這個回撥函式，所以我們還需要判斷下

function createAction(type,payloadCreator) {
    return (payload) => {
        const action = {
            type,
        };
        if(payload !== undefined){
            action.payload = payloadCreator?payloadCreator(payload):payload
        }
        return action;
    };
}

臥槽，完美。

接下來看看 redux-action的 handleActions吧

四、認識handleActions

我們先看看傳統的reducer是怎麼使用的

let reducer = (state,action)=>{
    switch(action.type){
      case "increment":return {count:state.count+1};break;
      case "decrement":return {count:state.count-1};break;
      default:return state;
    }
}

再看看使用了handleActions

const INCREMENT = "increment"
const DECREMENT = "decrement"
var reducer = handleActions({
    [INCREMENT]: (state, action) => ({
      counter: state.counter + action.payload
    }),
    [DECREMENT]: (state, action) => ({
      counter: state.counter - action.payload
    })
},initstate)

這裡大家不要被{[DECREMENT]:(){}} 的寫法嚇住哈，就是把屬性寫成變數了而已。

我們在控制檯 console.log(reducer) 看下結果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-kfrdU9BQ-1608209103080)(https://imgkr2.cn-bj.ufileos.com/736f323e-c4de-4439-92f2-51adf00e9185.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=VnvrRa9sDm%252B5TI9cp1Gvl0GwXBc%253D&Expires=1608280295)]

最後返回的就是一個 reducer 函式。

這樣就實現了 reducer 中功能化的自由，想寫什麼程式，我們只要寫在

{[increment]:(state,action)=>{}}

這個函式內就行，同時也可以把這些函式獨立成一個檔案，再引入進來就行

import {increment,decrement}from "./reducers.js"
var initstate = {count:0}
var reducer = createReducer({
    [INCREMENT]: increment,
    [DECREMENT]: decrement
},initstate)

reducers.js

//reducers.js
export let increment = (state,action)=>({counter: state.counter + action.payload})
export let decrement = (state,action)=>({counter: state.counter - action.payload})

可見，

handleactions 可以簡化 reducers 的寫法不用那麼多 switch 而且可以把函式獨立出來，這樣reducer就再也不會有一大堆程式碼了。

本來要講handleActions的實現了，但是在這之前，我們必須先講一下handleAction，對，你仔細看，沒有s

五、認識與手寫實現handleAction

5.1 用法

看下使用方式

const incrementReducer = handleAction(INCREMENT, (state, action) => {
  return {counter: state.counter + action.payload}
}, initialState);

可以看出來，跟handleActions的區別就是，handleAction生成的reducer是專門來處理一個action的。

5.2 原理實現

如果你看過redux原理的話（如果你沒看過的話，推薦你去看下我之前的文章Redux 原始碼解析系列(一) -- Redux的實現思想），相信你應該知道reducer(state,action)返回的結果是一個新的state，然後這個新的state會和舊的state進行對比，如果發現兩者不一樣的話，就會重新渲染使用了state的元件，並且把新的state賦值給舊的state.

也就是說handleAction()返回一個reducer函式，然後incrementReducer()返回一個新的state。

先實現返回一個reducer函式

function handleAction(type, callback) {
    return (state, action) => {
      
    };
}

接下來應當是執行reducer(state,action)是時候返回state，也就是執行下面返回的這個

(state, action) => {
      
};

而其實就是執行callback(state) 然後返回一個新的 state

function handleAction(type, callback) {
    return (state, action) => {
        
      return callback(state)
    };
}

或許你會有疑問，為什麼要這麼搞，而不直接像下面這樣，就少了一層包含。

function handleAction(state,type, callback) {
    return callback(state)
}

這才是它的巧妙之處。它在handleAction()返回的reducer()時，可不一定會執行callback(state),只有handleAction傳入的type跟reducer()中傳入的action.type匹配到了才會執行，否則就直接return state。表示沒有任何處理

function handleAction(type, callback) {
    return (state, action) => {
        
      return callback(state)
    };
}

因此我們需要多加一層判斷

function handleAction(type, callback) {
    return (state, action) => {
        if (action.type !== type) {
            return state;
        }
        return callback(state)
    };
}

多麼完美啊！

好了現在我們來實現下handleActions

六、handleActions原理實現

function handleActions(handlers, defaultState) {
    const reducers = Object.keys(handlers).map(type => {
        return handleAction(type, handlers[type]);
    });
    const reducer = reduceReducers(...reducers)
    return (state = defaultState, action) => reducer(state, action)
}

看，就這幾行程式碼，是不是很簡單，不過應該不好理解，不過沒關係，我依舊將它講得粗俗易懂。

我們拿上面用到的例子來講好了

var reducer = handleActions({
    [INCREMENT]: (state, action) => ({
      counter: state.counter + action.payload
    }),
    [DECREMENT]: (state, action) => ({
      counter: state.counter - action.payload
    })
},initstate)

{
    [INCREMENT]: (state, action) => ({
      counter: state.counter + action.payload
    }),
    [DECREMENT]: (state, action) => ({
      counter: state.counter - action.payload
    })
｝

上面這個物件，經過下面的程式碼之後

const reducers = Object.keys(handlers).map(type => {
        return handleAction(type, handlers[type]);
    });

返回的reducer，其實就是

[
  handleAction(INCREMENT,(state, action) => ({
      counter: state.counter + action.payload
  })),
  handleAction(DECREMENT,(state, action) => ({
      counter: state.counter + action.payload
  })),
]

為什麼要變成一個handleAction的陣列，

我大概想到了，是想每次dispatch(action)的時候，就要遍歷去執行這個陣列中的所有handleAction。

那豈不是每個handleAction返回的reducer都要執行？確實，但是別忘了我們上面講到的，如果handleAction 判斷到 type和action.type 是不會對state進行處理的而是直接返回state

function handleAction(type, callback) {
    return (state, action) => {
        if (action.type !== type) {
            return state;
        }
        return callback(state)
    };
}

沒有即使每個 handleAction 都執行了也沒關係

那應該怎麼遍歷執行，用map，forEach？不，都不對。我們看回原始碼

function handleActions(handlers, defaultState) {
    const reducers = Object.keys(handlers).map(type => {
        return handleAction(type, handlers[type]);
    });
    const reducer = reduceReducers(...reducers)
    return (state = defaultState, action) => reducer(state, action)
}

使用了

const reducer = reduceReducers(...reducers)

用了reduceReducers這個方法，顧名思義，看這方法名，意思就是用reduce這個來遍歷執行reducers這個陣列。也就是這個陣列。

[
  handleAction(INCREMENT,(state, action) => ({
      counter: state.counter + action.payload
  })),
  handleAction(DECREMENT,(state, action) => ({
      counter: state.counter + action.payload
  })),
]

我們看下reduceReducers的內部原理

function reduceReducers(...args) {
    const reducers = args;
    return (prevState, value) => {
        return reducers.reduce((newState, reducer, index) => {
            return reducer(newState, value);
        }, prevState);
    };
};

我們發現將reducers這個陣列放入reduceReducers，然後執行reduceReducers，就會返回

(prevState, value) => {
    return reducers.reduce((newState, reducer, index) => {
        return reducer(newState, value);
    }, prevState);
};

這個方法，也就是說執行這個方法就會執行

return reducers.reduce((newState, reducer, index) => {
        return reducer(newState, value);
    }, prevState);

也就是會使用reduce遍歷執行reducers，為什麼要用reduce來遍歷呢？

這是因為需要把上一個handleAction執行後返回的state傳遞給下一個。

這個思想有一點我們之間之前講的關於compose函式的思想，感興趣的話，可以去看一下【前端進階之認識與手寫compose方法】

function handleActions(handlers, defaultState) {
    const reducers = Object.keys(handlers).map(type => {
        return handleAction(type, handlers[type]);
    });
    const reducer = reduceReducers(...reducers)
    return (state = defaultState, action) => reducer(state, action)
}

現在也就是說這裡的reducer是reduceReducers(...reducers)返回的結果,也就

reducer = (prevState, value) => {
    return reducers.reduce((newState, reducer, index) => {
        return reducer(newState, value);
    }, prevState);
};

而handleActions返回

(state = defaultState, action) => reducer(state, action)

也就是說handleActions其實是返回這樣一個方法。

(state = defaultState, action) => {
    return reducers.reduce((newState, reducer, index) => {
        return reducer(newState, value);
    }, state);
}

好傢伙，在handleAction之間利用reduce來傳遞state，真是個好方法，學到了。

貼一下github 的redux-action的原始碼地址，感興趣的朋友可以親自去閱讀一下，畢竟本文是做了簡化的 redux-actions：https://github.com/redux-utilities/redux-actions

最後

文章首發於公眾號《前端陽光》，歡迎加入技術交流群。

參考文章

【React系列---FSA知識】https://segmentfault.com/a/1190000010113847
【Redux-actions 的用法】https://zhuanlan.zhihu.com/p/273569290
【前端進階之認識與手寫compose方法】
Redux 原始碼解析系列(一) -- Redux的實現思想）

JDBC PreparedStatement 實現原理【推薦閱讀】
2017-08-06
JDBC
Redis實現使用者熱詞推薦
2018-01-05
Redis
推薦系統入門之使用協同過濾實現商品推薦
2021-03-11
推薦模型NeuralCF：原理介紹與TensorFlow2.0實現
2021-03-27
模型
推薦模型DeepCrossing: 原理介紹與TensorFlow2.0實現
2021-03-14
模型ROS
使用TensorFlow實現手寫識別（Softmax）
2017-03-13
使用CRDT實現分散式事務的資料推薦
2019-04-03
分散式
大廠技術實現 | 騰訊資訊流推薦排序中的並聯雙塔CTR結構 @推薦與計算廣告系列
2021-11-24
排序
推薦ABTest的實現策略總結
2014-11-08
手寫AOP實現過程
2020-08-12
手寫IOC實現過程
2020-08-08
個推技術實現原理介紹
2015-04-07
android 利用path 實現手寫板的手寫效果
2018-07-05
Android
使用 JavaScript 實現簡單候選項推薦功能（模糊搜尋）
2015-01-22
JavaScript
ARouter原理剖析及手動實現
2018-07-30
CNN實現手寫數字識別並改變引數進行分析
2019-12-19
CNN
推薦書籍：金字塔原理
2016-02-23
手機號碼歸屬地 API 實現個性化推薦的思路分析
2023-04-12
API
Masonry實現原理並沒有那麼可怕
2018-03-01
《機器學習：演算法原理和程式設計實踐》4：推薦系統原理
2018-07-07
機器學習演算法程式設計
KVO使用及實現原理
2019-01-11
[改善Java程式碼] 推薦使用序列化實現物件的拷貝
2016-04-25
Java物件
用原生js手寫實現promise
2019-04-14
JSPromise
小程式實現手寫簽名
2022-02-18
手寫一個jsonp實現
2017-10-19
JSON
php 高效率寫法推薦
2010-12-03
PHP
實用工具推薦
2017-12-21
手撕Vuex-Vuex實現原理分析
2023-10-28
Vue
協同過濾實現小型推薦系統
2018-11-17
新浪明星日誌熱門推薦（java實現）
2015-06-19
Java
手寫實現java棧結構，並實現簡易的計算器（基於字尾演算法）
2020-05-04
Java演算法
漫威無限現已在App Store首發並榮獲Today推薦！
2020-01-13
APP
推薦系統入門之使用ALS演算法實現打分預測
2021-03-08
演算法
JS手寫狀態管理的實現
2019-03-03
JS
對HashMap的思考及手寫實現
2019-01-28
HashMap
純手寫實現JDK動態代理
2019-01-24
JDK
【超好用API推薦】用dom4j建立XML檔案並寫入節點
2021-08-27
APIXML
一些程式碼寫法推薦
2020-11-28