React路由中的redux和redux知識點拓展

Posted on by

路由中使用redux

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

  • 第一步 在路由策略組件中（如HashRouter），渲染Route組件，並在該Route路由規則組件中，引入connect方法處理後的應用程序組件
  • 第二步 在Provider組件中，渲染路由策略組件（如HashRouter）。

註意：路由規則渲染組件的時候，路由規則組件隻負責向組件傳遞路由相關的數據，其他的數據（如store數據）是不會傳遞的

所以Route渲染的組件，想接收store中的數據，我們隻能采用第二種方式，渲染處理後的組件。

路由reducer

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

提供瞭routerReducer，表示路由的reducer

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

參數是對象：

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

value表示reducer

相當於vuex中的module切割模塊

此時合並後，在組件中，訪問state數據，要攜帶命名空間

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

Redux拓展

state拓展

我們目前操作的state都是一個值類型的數據

因此我們可以直接操作這個state數據

如果state是一個引用類型的數據，我們就不能在state上直接操作瞭

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

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

由於後面的數據會覆蓋前面的數據，因此我們將新對象放在state對象之後。

action拓展

action是一個通信的對象，裡面攜帶消息數據

靜態action

我們目前定義的action對象都是一個靜態的action對象，

也就是說action中的數據是固定的

適用性會收到限制。為瞭提高適用性，我們可以定義動態action

動態action

動態action是一個函數，可以接收參數，我們根據參數的不同，返回不同的action，這樣就增強瞭action對象的適用性瞭

異步action

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

異步action適用場景：

react是一個視圖層的框架，但是我們有時候將請求放在組件中，就會讓組件做瞭太多數據業務邏輯方面的事情瞭，有時候我們想將這部分請求放在action實現，此時這個action就是一個異步的action

異步action與同步action相比：

  • 同步action（例如動態action），是一個函數，返回值是一個對象（就是發佈的aciton對象）
  • 異步aciton，是一個函數，返回值是一個函數
  • 返回值函數中，參數是dispatch
  • 我們可以在返回值函數中，實現異步操作，並在操作完成的時候，通過參數dispatch發佈同步的action消息。
  • redux默認不支持異步，想使用異步action就要安裝中間件

異步action中間件

redux-thunk是異步action中間件

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

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

到此這篇關於React路由中的redux和redux知識點拓展的文章就介紹到這瞭,更多相關React redux和redux內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：