九 react redux的使用

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
}

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'
))

使用了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，所以下...