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

2022-08-28 14:00:20

路由中使用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內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！