redux異步操作的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下redux異步操作的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

十余年的沈北新網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整沈北新建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“沈北新網(wǎng)站設(shè)計”,“沈北新網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

一、redux基礎(chǔ)

redux

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

react-redux
容器組件，負(fù)責(zé)管理數(shù)據(jù)和業(yè)務(wù)邏輯，不負(fù)責(zé)UI呈現(xiàn)
UI組件，提供UI呈現(xiàn)，無狀態(tài)即不使用this.state，狀態(tài)全部由this.props提供
由connect生成容器組件，每次store改變會調(diào)用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方法并將結(jié)果提供給reducer
action混亂導(dǎo)致不易維護
redux-saga
saga會監(jiān)聽action并基于這個action執(zhí)行Effects操作
Effects提供靈活的API，包括阻塞、非阻塞調(diào)用，取消、等待、race等操作
方便隔離并執(zhí)行異步操作，并易于測試

三、redux-request-async-middleware

先從redux文檔中的異步action說起，每個接口調(diào)用需要dispatch三個同步action，分別是:
一種通知 reducer 請求開始的 action。對于這種 action，reducer 可能會切換一下 state 中的 isFetching 標(biāo)記。以此來告訴 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));
})

只是將這個操作封裝進(jìn)中間件里，特殊的地方在于:

所有的異步請求共用這三個action
用subject來區(qū)分是哪一個請求
將所有的結(jié)果都放到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一樣，將方法放進(jìn)action里
中間件攔截FETCH_POSTS_REQUEST action，并進(jìn)行異步處理

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,
          }
        }
      )
      return state;
  }
}

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

將請求進(jìn)行封裝

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

寫一個方法來發(fā)起FETCH_POSTS_REQUEST action
也就是說寫請求的時候不用再管action這東西了，直接調(diào)用request方法

將結(jié)果進(jìn)行封裝

const getResponse = state =>
  state
  && state.response !== null
  && state.response;
 
const getLoading = (states = []) =>
  states.reduce((pre, cur) =>
    pre || (cur && cur.isFetching)
    , false)
  || false;

可以獲取結(jié)果和多個請求下loading的狀態(tài)
有更多的操作或者格式還可以繼續(xù)封裝，比如列表

四、總結(jié)

使用了redux來進(jìn)行狀態(tài)管理，而并不需要編寫redux那一套復(fù)雜邏輯，大程度的減少異步操作的復(fù)雜度
適用于前端通過接口來處理和存儲數(shù)據(jù)的項目
接口由redux處理，而視圖組件由內(nèi)部state來處理，而外部只暴露簡單的接口來進(jìn)行操作，分離業(yè)務(wù)層和視圖層
對比react 16.3 new content API，redux的優(yōu)勢在于熱插播的中間件和純函數(shù)reducer寫法

以上是“redux異步操作的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

新聞標(biāo)題：redux異步操作的示例分析-創(chuàng)新互聯(lián)
分享地址：http://muchs.cn/article0/dsjpio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、面包屑導(dǎo)航、建站公司、關(guān)鍵詞優(yōu)化、App設(shè)計、企業(yè)網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容