成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Redux入門0x104: Action Creators

sydMobile / 2923人閱讀

摘要：就為我?guī)砹艘环N應(yīng)用狀態(tài)管理的新思想，其間充斥著許多個概念，等，乍一看頭大，等到仔細(xì)理解了它的思想，或許就很簡單了，也是其中一種。

0x000 概述

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

0x001 概念

其實很多框架在技術(shù)上沒有太大的難度，真正難的是思想，思想的突破遠(yuǎn)遠(yuǎn)比技術(shù)突破難多了。redux就為我?guī)砹艘环N應(yīng)用狀態(tài)管理的新思想，其間充斥著許多個概念，state、reduce等，乍一看頭大，等到仔細(xì)理解了它的思想，或許就很簡單了，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"})發(fā)出了一個action，但是這種方式實在是太不優(yōu)雅了，存在兩個問題：

容易產(chǎn)生重復(fù)代碼，特別是復(fù)雜的action

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

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

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

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

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

store.dispatch(increment())

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

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

動態(tài)變化時候隱藏細(xì)節(jié)，異步action、數(shù)據(jù)拼裝...

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

store.dispatch(increment(5))
0x003 總結(jié)

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

0x004 資源

源碼

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97873.html

相關(guān)文章

  • Router入門0x201: 從 URL 到 SPA

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

    honmaple 評論0 收藏0

  • 【React進(jìn)階系列】手寫redux api

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

    Elle 評論0 收藏0

  • 【React進(jìn)階系列】手寫實現(xiàn)react-redux api

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

    劉玉平 評論0 收藏0

  • redux 源碼分析，實現(xiàn)一個迷你的redux

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

    Ashin 評論0 收藏0

  • Redux 初見

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

    trigkit4 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<