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,所以下...