企業級後台react redux非同步操作實踐

2021-09-13 11:44:11 字數 2738 閱讀 8589

通過 dispatch(action) -> 中介軟體 -> reducer處理資料 -> 改變store -> 使用subscribe()監聽store改變更新檢視 的方式管理狀態

將所有狀態儲存在乙個store物件裡面

reducer為純函式,而非同步操作由於結果的不確定性所以含有***,所以需要特殊處理

容器元件,負責管理資料和業務邏輯,不負責ui呈現

ui元件,提供ui呈現,無狀態即不使用this.state,狀態全部由this.props提供

由connect生成容器元件,每次store改變會呼叫connect,connect接收兩個引數: mapstatetoprops, mapdispatchtoprops

mapstatetoprops,將狀態對映到ui元件的props

mapdispatchtoprops,將dispatch方法對映到ui元件的props

provider元件,使用content api將store從頂層開始傳到每一層component供connect使用

redux-thunk中介軟體允許action是乙個方法

中介軟體收到action後會執行action方法並將結果提供給reducer

action混亂導致不易維護

saga會監聽action並基於這個action執行effects操作

effects提供靈活的api,包括阻塞、非阻塞呼叫,取消、等待、race等操作

方便隔離並執行非同步操作,並易於測試

一種通知 reducer 請求開始的 action。對於這種 action,reducer 可能會切換一下 state 中的 isfetching 標記。以此來告訴 ui 來顯示載入介面。

一種通知 reducer 請求成功的 action。對於這種 action,reducer 可能會把接收到的新資料合併到 state 中,並重置 isfetching。ui 則會隱藏載入介面,並顯示接收到的資料。

一種通知 reducer 請求失敗的 action。對於這種 action,reducer 可能會重置 isfetching。另外,有些 reducer 會儲存這些失敗資訊,並在 ui 裡顯示出來。

也就是乙個介面發起是這樣的

dispatch(fetchpostsrequest(subject));

fetch(url).then(res => ).catch(e => )

所有的非同步請求共用這三個action

用subject來區分是哪乙個請求

將所有的結果都放到store.requests裡

export const reduxrequest = store => next => action =>  = action;

let _next = action.next;

if(type === fetch_posts_request) ).catch(error => );

}return result

};

和redux-thunk一樣,將方法放進action裡

中介軟體攔截fetch_posts_request action,並進行非同步處理

export const requests = (state = {}, action) => ,

state,});

case fetch_posts_failure:

return assign({},

state,});

case fetch_posts_success:

return assign({},

state,});

case fetch_posts_clear:

return assign({},

state,});

default:

return state;

}}

將結果放入該subject對應下的response,如果錯誤的話將錯誤資訊放入error當中

isfetching表示當前的請求狀態

另外還加入了當前的狀態state和subject資訊

const request = (subject, model, next) => ;
寫乙個方法來發起fetch_posts_request action

也就是說寫請求的時候不用再管action這東西了,直接呼叫request方法

const getresponse = state =>

state

&& state.response !== null

&& state.response;

const getloading = (states = ) =>

states.reduce((pre, cur) =>

pre || (cur && cur.isfetching)

, false)

|| false;

可以獲取結果和多個請求下loading的狀態

有更多的操作或者格式還可以繼續封裝,比如列表

使用了redux來進行狀態管理,而並不需要編寫redux那一套複雜邏輯,最大程度的減少非同步操作的複雜度

適用於前端通過介面來處理和儲存資料的專案

介面由redux處理,而檢視元件由內部state來處理,而外部只暴露簡單的介面來進行操作,分離業務層和檢視層

對比react 16.3 new content api,redux的優勢在於熱插播的中介軟體和純函式reducer寫法

企業級API設計

最近對service的api設計,在team內有些討論,主要集中在api是足夠抽象 通用好呢,還是具體 易用好?其實這個是要折衷的,通用的好處是以後更改api的可能性小,但壞處是想要通用,裡面的字段就不能定義太死,不定義死,極端的例子是全部用name value pair,最通用,但client面對...

SpringBoot企業級框架

zebra 微服務框架 springboot zebra4j是一款使用sping boot特性全新開發的微服務web框架,嘗試封裝一些常用框架比如dubbo等作為spring boot元件,結合微服務的框架思想,利用nodejs zebra4js作為應用閘道器,使得各個功能分層服務,持續迭代,解放團...

SpringBoot企業級框架

zebra 微服務框架 springboot zebra4j是一款使用sping boot特性全新開發的微服務web框架,嘗試封裝一些常用框架比如dubbo等作為spring boot元件,結合微服務的框架思想,利用nodejs zebra4js作為應用閘道器,使得各個功能分層服務,持續迭代,解放團...