詳解redux異步操作實踐

2019-11-19 13:15:17

字體：大中小

來源：轉載

供稿：網(wǎng)友

一、redux基礎

redux

通過 dispatch(action) -> 中間件 -> reducer處理數(shù)據(jù) -> 改變store -> 使用subscribe()監(jiān)聽store改變更新視圖的方式管理狀態(tài)
將所有狀態(tài)存儲在一個store對象里面
reducer為純函數(shù)，而異步操作由于結果的不確定性所以含有副作用，所以需要特殊處理

react-redux

容器組件，負責管理數(shù)據(jù)和業(yè)務邏輯，不負責UI呈現(xiàn)
UI組件，提供UI呈現(xiàn)，無狀態(tài)即不使用this.state，狀態(tài)全部由this.props提供
由connect生成容器組件，每次store改變會調用connect，connect接收兩個參數(shù): mapStateToProps, mapDispatchToProps
mapStateToProps，將狀態(tài)映射到UI組件的props
mapDispatchToProps，將dispatch方法映射到UI組件的props
Provider組件，使用content API將store從頂層開始傳到每一層component供connect使用

二、redux處理異步的中間件

redux-thunk

redux-thunk中間件允許action是一個方法
中間件收到action后會執(zhí)行action方法并將結果提供給reducer
action混亂導致不易維護

redux-saga

saga會監(jiān)聽action并基于這個action執(zhí)行Effects操作
Effects提供靈活的API，包括阻塞、非阻塞調用，取消、等待、race等操作
方便隔離并執(zhí)行異步操作，并易于測試

三、redux-request-async-middleware

先從redux文檔中的異步action說起，每個接口調用需要dispatch三個同步action，分別是:

一種通知 reducer 請求開始的 action。對于這種 action，reducer 可能會切換一下 state 中的 isFetching 標記。以此來告訴 UI 來顯示加載界面。
一種通知 reducer 請求成功的 action。對于這種 action，reducer 可能會把接收到的新數(shù)據(jù)合并到 state 中，并重置 isFetching。UI 則會隱藏加載界面，并顯示接收到的數(shù)據(jù)。
一種通知 reducer 請求失敗的 action。對于這種 action，reducer 可能會重置 isFetching。另外，有些 reducer 會保存這些失敗信息，并在 UI 里顯示出來。

也就是一個接口發(fā)起是這樣的

dispatch(fetchPostsRequest(subject));fetch(url).then(res => {  dispatch(fetchPostsSuccess(subject, res));}).catch(e => {  dispatch(fetchPostsFailure(subject, e));})

而我做的事情只是將這個操作封裝進中間件里，特殊的地方在于:

所有的異步請求共用這三個action
用subject來區(qū)分是哪一個請求
將所有的結果都放到store.requests里

中間件源碼

export const reduxRequest = store => next => action => {  let result = next(action);  let { type, subject, model } = action;  let _next = action.next;  if(type === FETCH_POSTS_REQUEST) {    model().then(response => {      _next && _next(response);      store.dispatch(fetchPostsSuccess(subject, response));    }).catch(error => {      console.error(error);      store.dispatch(fetchPostsFailure(subject, error));    });  }  return result};

和redux-thunk一樣，將方法放進action里
中間件攔截FETCH_POSTS_REQUEST action，并進行異步處理

reducer源碼

export const requests = (state = {}, action) => {  switch (action.type) {    case FETCH_POSTS_REQUEST:      return assign({},        state,        {          [action.subject]: {            isFetching: true,            state: 'loading',            subject: action.subject,            response: null,            error: null,          }        }      );    case FETCH_POSTS_FAILURE:      return assign({},        state,        {          [action.subject]: {            isFetching: false,            state: 'error',            subject: action.subject,            response: state[action.subject].response,            error: action.error,          }        }      );    case FETCH_POSTS_SUCCESS:      return assign({},        state,        {          [action.subject]: {            isFetching: false,            state: 'success',            subject: action.subject,            response: action.response,          }        }      );    case FETCH_POSTS_CLEAR:      return assign({},        state,        {          [action.subject]: {            isFetching: false,            state: 'cleared',            subject: null,            response: null,            error: null,          }        }      );    default:      return state;  }}

將結果放入該subject對應下的response，如果錯誤的話將錯誤信息放入error當中
isFetching表示當前的請求狀態(tài)
另外還加入了當前的狀態(tài)state和subject信息

將請求進行封裝

const request = (subject, model, next) => {  _dispatch(fetchPostsRequest(subject, model, next));  return true;};

寫一個方法來發(fā)起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;