1. 程式人生 > >Redux入門0x104: Action Creators

Redux入門0x104: Action Creators

0x000 概述

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

0x001 概念

其實很多框架在技術上沒有太大的難度,真正難的是思想,思想的突破遠遠比技術突破難多了。redux就為我帶來了一種應用狀態管理的新思想,其間充斥著許多個概念,statereduce等,乍一看頭大,等到仔細理解了它的思想,或許就很簡單了,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 資源