亚洲自拍另类欧美丝袜,国产精品一区二区欧美黑人喷潮水,99热热热

一、前言

為什么介紹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; };}

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) 看下結果

最后返回的就是一個 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函數