Redux非同步方案實現

一、不借用第三方庫實現redux非同步

場景建立：先來個很常見的場景，在http請求之前我們一般會用loading元件來表示資料正在請求，等http請求結束就關閉loading。下圖所示的是http請求的3種狀態：

上述場景如果不使用redux狀態管理器，我們會使用react的state或hooks特性來實現；如果使用redux該怎麼實現呢？

redux是通過dispatch()方法去觸發reducer機制去改變state的。一般情況下，正常的http請需要執行dispatch()三次。如下所示：

dispatch()
;//開始請求
dispatch()
;//請求成功
dispatch()
;//請求失敗

大概的實現流程如下**所示：

class
demoview
extends
component,,
]}if(res[
"flag"]==
"success"))
);}else))
;}},
3000);
}render()
}

從上面**可知，如果單純使用redux也可以實現非同步redux。不過不建議這麼做。react屬於ui以構建 ui 為主的的庫。盡量將資料邏輯與view分離，簡化view層面的邏輯。可以借助第三庫實現view層或資料層的分離，降低耦合度。有利於**梳理；

二、借用第三方庫實現redux非同步

react-redux：屬於將react專案與redux進行繫結關聯的第三方庫；

redux-chunk：可以將dispatch()的引數定義為函式的中介軟體；

redux中介軟體：中介軟體一般用來處理action物件。而action物件通過dispatch()方法派發給reducer處理。在進入reducer之前那階段稱之為中介軟體管道。也就是通過在中間管道之間執行一系列中介軟體功能以達到增強action功能，最終進入reducer處理；

react-redux主要提供provider元件和connect()方法；如果沒有用provider元件包裹根元件，connect()方法也無效provider元件：使你的react應用能夠訪問到redux；

connect()方法：將你的react元件和redux關聯起來；

//provider元件的用法
reactdom.
render
(>
>
<
/provider>
, document.
getelementbyid
("root"
))

//connect()方法的用法
import react,
from
'react'
;import
from
"react-native"
;import
from
"react-redux"
;//這裡封裝了redux非同步寫法
import
from
"../../redux/mesetting"
;class
mesettin**iew
extends
component
render()
>
<
/view>);
}}export
default
connect
((state)
=>},
(dispatch)
=>})
(mesettin**iew)
;

import
from
"../utils"
;const initstate=
;export
const
mesettingreducer
=(state=initstate,action)
=>
;case
"mesetting_success"
:return
;case
"mesetting_error"
:return
;default
:return state;}}
export
const
mesettingaction=(
)=>);
const url="";
const senddata=
;return
newpromise
((resolve,reject)
=>);
}else);
}resolve
(result);}
).catch
((err)
=>);
reject
(err);}
);})
}}

Redux非同步方案實現

Redux 非同步操作

Redux 處理非同步 Action

Redux 的非同步資料獲取

Redux非同步方案實現

Redux 非同步操作

Redux 處理非同步 Action

Redux 的非同步資料獲取

相關推薦