React路由中的redux怎么使用

這篇“React路由中的redux怎么使用”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“React路由中的redux怎么使用”文章吧。

路由中使用redux

在路由中使用redux只需要兩步：

• 第一步 在路由策略組件中（如HashRouter），渲染Route組件，并在該Route路由規(guī)則組件中，引入connect方法處理后的應(yīng)用程序組件

• 第二步 在Provider組件中，渲染路由策略組件（如HashRouter）。

注意：路由規(guī)則渲染組件的時候，路由規(guī)則組件只負(fù)責(zé)向組件傳遞路由相關(guān)的數(shù)據(jù)，其他的數(shù)據(jù)（如store數(shù)據(jù)）是不會傳遞的

所以Route渲染的組件，想接收store中的數(shù)據(jù)，我們只能采用第二種方式，渲染處理后的組件。

路由reducer

路由也提供了reducer方法，我們需要引入react-router-redux

提供了routerReducer，表示路由的reducer

我們也想添加到應(yīng)用中，我們就要使用combineReducers方法添加多個reducer

參數(shù)是對象：

key表示state名稱（命名空間）

value表示reducer

相當(dāng)于vuex中的module切割模塊

此時合并后，在組件中，訪問state數(shù)據(jù)，要攜帶命名空間

// 拓展組件
let DealApp = dealFn(App);
let DealHome = dealFn(Home);
let DealList = dealFn(List);
let DealDetail = dealFn(Detail);
// 第二步 確定渲染方式
let routes = (
<HashRouter>
{/*<App></App>*/}
{/* 1 通過路由規(guī)則，渲染處理后的應(yīng)用程序 */}
<Route path="/" component={DealApp}></Route>
</HashRouter>
)
// 2 在provider中，渲染路由規(guī)則
render(<Provider store={store}>{routes}</Provider>, app)

Redux拓展

state拓展

我們目前操作的state都是一個值類型的數(shù)據(jù)

因此我們可以直接操作這個state數(shù)據(jù)

如果state是一個引用類型的數(shù)據(jù)，我們就不能在state上直接操作了

我們要先定義新對象，在新對象上操作數(shù)據(jù)，最終與原來的state合并成新對象，并返回這個新對象作為新的state數(shù)據(jù)

我們可以通過ES6提供的Object.assign方法來合并對象，

由于后面的數(shù)據(jù)會覆蓋前面的數(shù)據(jù)，因此我們將新對象放在state對象之后。

action拓展

action是一個通信的對象，里面攜帶消息數(shù)據(jù)

靜態(tài)action

我們目前定義的action對象都是一個靜態(tài)的action對象，

也就是說action中的數(shù)據(jù)是固定的

適用性會收到限制。為了提高適用性，我們可以定義動態(tài)action

動態(tài)action

動態(tài)action是一個函數(shù)，可以接收參數(shù)，我們根據(jù)參數(shù)的不同，返回不同的action，這樣就增強(qiáng)了action對象的適用性了

異步action

到目前為止，我們所發(fā)送的action都是同步的，因為在action中沒有異步的操作

異步action適用場景：

react是一個視圖層的框架，但是我們有時候?qū)⒄埱蠓旁诮M件中，就會讓組件做了太多數(shù)據(jù)業(yè)務(wù)邏輯方面的事情了，有時候我們想將這部分請求放在action實現(xiàn)，此時這個action就是一個異步的action

異步action與同步action相比：

• 同步action（例如動態(tài)action），是一個函數(shù)，返回值是一個對象（就是發(fā)布的aciton對象）

• 異步aciton，是一個函數(shù)，返回值是一個函數(shù)

• 返回值函數(shù)中，參數(shù)是dispatch

• 我們可以在返回值函數(shù)中，實現(xiàn)異步操作，并在操作完成的時候，通過參數(shù)dispatch發(fā)布同步的action消息。

• redux默認(rèn)不支持異步，想使用異步action就要安裝中間件

異步action中間件

redux-thunk是異步action中間件

我們可以通過applyMiddleware方法，將其安裝在redux中，

該方法參數(shù)就是中間件，返回一個新的方法，用來拓展createState方法，會得到一個新的創(chuàng)建store方法，此時我們用這個新的方法創(chuàng)建store，新的store就具有了異步aciton的功能。

以上就是關(guān)于“React路由中的redux怎么使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。