Redux入門0x104: Action Creators

sydMobile 發布于2019-08-23 12:02 / 2921人閱讀

摘要：就為我帶來了一種應用狀態管理的新思想，其間充斥著許多個概念，等，乍一看頭大，等到仔細理解了它的思想，或許就很簡單了，也是其中一種。

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，但是這種方式實在是太不優雅了，存在兩個問題：

容易產生重復代碼，特別是復雜的action

使用字符串作為type容易出錯，重構也不易（200個地方使用了INCREMENT，有一天突然要修改，那就gg了）

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

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

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

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

store.dispatch(increment())

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

不需要重復的寫{....}，防止大的aciton寫到吐

動態變化時候隱藏細節，異步action、數據拼裝...

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

store.dispatch(increment(5))

0x003 總結

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

0x004 資源

源碼

GPU云服務器云服務器 Creators Redux redux源碼 redux-saga

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97873.html

Router入門0x201: 從 URL 到 SPA

摘要：的全稱是統一資源定位符英文，可以這么說，是一種標準，而網址則是符合標準的一種實現而已。渲染器，將組件渲染到頁面上。 0x000 概述從這一章開始就進入路由章節了，并不直接從如何使用react-route來講，而是從路由的概念和實現來講，達到知道路由的本質，而不是只知道如何使用react-route庫的目的，畢竟react-route只是一個庫，是路由的一個實現而已，而不是路由本身。 ...

honmaple 2019-08-26 12:20 評論0 收藏0
【React進階系列】手寫redux api

摘要：每個接受的和函數作為命名參數，并返回一個函數。調用鏈中最后一個會接受真實的的方法作為參數，并借此結束調用鏈。簡介：手寫實現redux基礎api createStore( )和store相關方法 api回顧： createStore(reducer, [preloadedState], enhancer) 創建一個 Redux store 來以存放應用中所有的 state reduc...

Elle 2019-08-23 12:25 評論0 收藏0
【React進階系列】手寫實現react-redux api

簡介：簡單實現react-redux基礎api react-redux api回顧把store放在context里，所有子組件可以直接拿到store數據使組件層級中的 connect() 方法都能夠獲得 Redux store 根組件應該嵌套在中 ReactDOM.render( , rootEl ) ReactDOM.render( ...

劉玉平 2019-08-23 12:28 評論0 收藏0
redux 源碼分析，實現一個迷你的redux

摘要：實現一個先不考慮中間件，實現一個簡潔的實現是最主要的一個了，通過可以創建一個用來存放應用中所有的，一個應用只能有一個。方法是用來把每一個用方法包裹一下，因為可能只是返回一個具有屬性的對象，只有用執行才有意義。正好可以利用的特性實現這個效果。實現一個redux 先不考慮中間件，實現一個簡潔的redux 實現createStore createStore是redux最主要的一個API了，...

Ashin 2019-08-26 13:37 評論0 收藏0
Redux 初見

摘要：函數的作用是，返回一個最終的函數，做的事情是得到一個由多個不同函數作為可以自定義的對象。把數據放到一個對象列表中，每個數據用作為主鍵。不同類型的對象通過引用數據，這樣數據發生改變的時候，只需要修改一處地方，減少數據冗余或者混用。 Redux初見本文記錄的是自己對redux的學習和理解，希望可以簡潔易懂，入門redux，一步步的走進redux! Redux是什么 Redux是Java...

trigkit4 2019-08-20 10:23 評論0 收藏0