Redux入門0x104: Action Creators

0x000 概述

寫長文章有點累啊，偶爾寫點短的文章吧

0x001 概念

其實很多框架在技術上沒有太大的難度，真正難的是思想，思想的突破遠遠比技術突破難多了。redux就爲我帶來了一種應用狀態管理的新思想，其間充斥着許多個概念，state、reduce等，乍一看頭大，等到仔細理解了它的思想，或許就很簡單了，Action Creators也是其中一種。

0x002 栗子

看看前面我們是怎麼使用redux的:

import {createStore} from 'redux'
function counter(state = 0, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1
        default:
            return state
    }
}

let store = createStore(counter)

store.subscribe(() => {
    console.log(store.getState())
})

store.dispatch({type: 'INCREMENT'})

我們使用store.dispatch({type: 'INCREMENT'})發出了一個action，但是這種方式實在是太不優雅了，存在兩個問題：

1. 容易產生重複代碼，特別是複雜的action
2. 使用字符串作爲type容易出錯，重構也不易（200個地方使用了INCREMENT，有一天突然要修改，那就gg了）

對於第二個問題，解決很簡單，使用常量就好了

const ACTION_INCREMENT='INCREMENT'
store.dispatch({type: ACTION_INCREMENT})

第一個問題，也很簡單，使用函數分裝起來就好了

const increment = () => {
    return {
        type: ACTION_INCREMENT
    }
}

store.dispatch(increment())

這個封裝起來的函數就是Action Creator了，這種做法就是用函數封裝了一下而已。但是在維護性上卻有很大提升：

1. 不需要重複的寫{....}，防止大的aciton寫到吐
2. 動態變化時候隱藏細節，異步action、數據拼裝...

const increment = (step) => {
    return {
        type: ACTION_INCREMENT,
        step:step
    }
}

store.dispatch(increment(5))

0x003 總結

在學習一個東西了時候，可以通過實踐來理解概念，純粹的概念很讓人頭疼啊。

0x004 資源

• 源碼