React系列 FSA知識

2021-09-16 21:02:26 字數 2344 閱讀 6092

action在flux架構中是及其重要的概念,它是應用狀態變化的必要條件,所有的狀態都必須通過action觸發。action的角色是狀態變更資訊的載體,是乙個object,包含乙個表示action type的字段,這是flux對action的全部要求。不同於flux作為架構思想的寬泛要求,在實際的開發中,我們往往希望打交道的同類實物有著類似的介面/結構。

flux standard action的定位是「乙個使用者友好的flux action物件標準」,它希望通過規範action的格式,為通用的action工具或抽象的實現奠定基礎。換句話說,如果所有的action都有著類似的結構,那麼通過統一的方法建立或修改action,或者通過統一的邏輯對action進行分析與響應等,便有了存在的可能性。

典型的flux standard action結構如下:

}

不難發現,fsa首先是乙個普通的action,鼓勵我們將負載資訊放到payload欄位中。基於這樣的初步認識,了解一下它的規範。

type

必需字段。action的type欄位標識了當前發生行為的本質特徵。相同型別的行為所對應的action的type值必須是嚴格相等的。它往往取值為字串常量。

payload

可選字段。可以是任意型別的資料,顧名思義,它存放當前action的「負載」內容。當error字段值為true時候,payload的值應當是乙個error物件。

error

可選字段。當取值為true時,當前action代表了某處發生了錯誤。

meta

可選字段。可以是任意型別的資料。用來存放非負載內容的額外資訊。在redux專案中,典型的使用meta的例子就是存放那些用來給middleware使用的資訊,理論上meta的內容不會影響reducer的行為。

正如前面提到的,基於相同的action結構,提取action操作的公共邏輯會更加方便,redux-actions、redux-promise等都是在fsa基礎上衍生出來的action處理工具。

在 redux 全家桶中,可以利用 redux-actions 來建立符合 fsa 規範的action。我們從普通的action物件講起。

以新增乙個todo的action為例:

這樣就定義了乙個新增一條todo的action,然後就能通過某個行為去觸發這個action,由這個action攜帶的資料(data)去更新store(state/reducer):

store.dispatch()
type 是乙個常量,action的必備字段,用於標識該action的型別。在專案初期,這樣定義action也能愉快的擼碼,但是隨著專案的複雜度增加,這種方式會讓**顯得冗餘,因為如果有多個行為觸發同乙個action,則這個action要寫多次;同時,也會造成**結構不清晰。因而,得更改建立action的方式:

const add_todo = 'add_todo';

let addtodo = (data='default data') =>

}//觸發action

store.dispatch(addtodo());

更改之後,**清晰多了,如果有多個行為觸發同乙個action,只要呼叫一下函式 addtodo 就行,並將action要攜帶的資料傳遞給該函式。類似 addtodo 這樣的函式,稱之為 action creator。action creator 的唯一功能就是返回乙個action供 dispatch 進行呼叫。

但是,這樣的action creator 返回的action 並不是乙個標準的action。在flux的架構中,乙個action要符合 fsa(flux standard action) 規範,需要滿足如下條件:

payload 是乙個物件,用作action攜帶資料的載體。所以,上述的寫法可以更改為:

let addtodo = (data='default data') => 

}}

在 redux 全家桶中,可以利用 redux-actions 來建立符合 fsa 規範的action:

import  from 'redux-actions';

let addtodo = creataction(add_todo)

//same as

let addtodo = creataction(add_todo,data=>data)

let isfsa = object.keys(action).every((item)=>)

react系列教程

這個系列將從基礎語法講起,把react全家桶都講到,然後到具體的使用,最後完成後,會寫乙個完整的demo。目前已經完成的內容 react系列 零 安裝 react系列 一 jsx語法 元件概念 生命週期介紹 react系列 二 高階元件 hoc react系列 三 元件間通訊 react系列 四 r...

react系列(1)入門

react對初學者入門較難,它也是現在前端三大主流框架之一。想了想,還是寫一些文章吧,一來可以幫助想學習react的初學者,二來也可以總結經驗,把這些知識點共享出來。在挑選react版本的時候,發現react最新版的v16.x和v15.x之間會有api出入。比如,v16.x不再支援最基本的渲染元件r...

React系列 基礎概念

主要包括了4個部分 react 應用都是構建在元件之上,元件包含props和state react 的 jsx 的語法就是將 html 直接嵌入了 js 裡面 當元件狀態state有更改的時候,react 會自動呼叫元件的render方法重新渲染整個元件的 ui。當然如果真的這樣大面積的操作 dom...