九 react redux的使用

2021-10-21 10:43:26 字數 3183 閱讀 8665

ui元件:

容器元件

import

from

'react-redux'

import countui from

'../../components/count'

import

from

'../../redux/count_action'

function

mapstatetoprops

(state)

}function

mapdispatchtoprops

(dispatch)

}export

default

connect

(mapstatetoprops,mapdispatchtoprops)

(countui)

import react,

from

'react'

import count from

'./containers/count'

import store from

'./redux/store'

export

default

class

extends

component

/>

<

/div>)}

}

在前面,由於元件和容器分別進行定義,則導致檔案過多,因此可以將容器和元件合併成乙個檔案

對於容器中的mapstatetoprops和mapdispatchtoprops還可以進行簡寫

使用了react-redux後,不用再單獨對redux中狀態的變化進行監測,該步驟可以省略

containers/count/index.jsx

import

from

'react-redux'

import

from

'../../redux/count_action'

import react,

from

'react'

class

count

extends

component

=this

.selectnode

this

.props.

increment

(value*1)

}decrement=(

)=>

=this

.selectnode

this

.props.

decrement

(value*1)

}oddincrement=(

)=>

=this

.selectnode

if(this

.props.count %

2!==0)

}asyncincrement=(

)=>

=this

.selectnode

this

.props.

incrementaction

(value*1,

500)

}render()

<

/h3>

>

"1">

1<

/option>  

"2">

2<

/option>  

"3">

3<

/option>  

<

/select>  

>

+<

/button>  

>

-<

/button>  

>當前求和為奇數時加<

/button>  

>非同步加<

/button>

<

/div>)}

}export

default

connect

( state =>()

,//對映狀態

//對映操作狀態的方法

)(count)

import react,

from

'react'

import count from

'./containers/count'

export

default

class

extends

component

}

index.js

import react from

'react'

;import reactdom from

'react-dom'

;import

from

'react-redux'

import store from

'./redux/store'

//無需自己給容器元件傳遞store,

reactdom.

render

(>

>

<

/provider>

, document.

getelementbyid

('root'

))

容器元件和ui元件整合乙個檔案

使用了react-redux後也不用再自己檢測redux中狀態的改變了,容器元件可以自動完成這個工作

mapdispatchtoprops也可以簡單的寫成乙個物件

乙個元件要和redux「打交道」要經過哪幾步?

(1).定義好ui元件---不暴露

(2).引入connect生成乙個容器元件,並暴露,寫法如下:

connect(

state => (), //對映狀態

//對映操作狀態的方法

)(ui元件)

(4).在ui元件中通過this.props.******x讀取和操作狀態

react redux使用的方法

1.mapdispatchtoprops中使用bindactioncreators 2.import thunk from redux thunk 使用redux thunk中介軟體,我們可以在action構造器中返回乙個函式,而不是乙個物件。3.通常情況下,我們的專案可能會有龐大的資料,所以一般情...

react redux使用小結

總結 需要使用的庫redux,react redux,react router redux 使用乙個react redux 的庫使得redux的使用更簡潔,它提供了provider和connect方法 先在入口檔案內使用 元件 provider 這裡使用了redux中的重要組成部分store,所以下...

react redux使用小結

總結 需要使用的庫redux,react redux,react router redux 使用乙個react redux 的庫使得redux的使用更簡潔,它提供了provider和connect方法 先在入口檔案內使用 元件 provider 這裡使用了redux中的重要組成部分store,所以下...