Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitae1d26e

Browse files
committed
feat: add mapDispatchToProps
1 parenta5009c6 commitae1d26e

File tree

2 files changed

+58
-32
lines changed

2 files changed

+58
-32
lines changed

‎src/component/React-redux.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
importReact,{Component}from'react'
22
importPropTypesfrom'prop-types'
33

4-
exportconstconnect=mapStateToProps=>WrappedComponent=>{
4+
exportconstconnect=(mapStateToProps,mapDispatchToProps)=>WrappedComponent=>{
55
classConnectextendsComponent{
66
staticcontextTypes={
77
store:PropTypes.object
@@ -26,10 +26,16 @@ export const connect = mapStateToProps => WrappedComponent => {
2626
const{
2727
store
2828
}=this.context
29-
letstateProps=mapStateToProps(store.getState(),this.props)
29+
letstateProps=mapStateToProps
30+
?mapStateToProps(store.getState(),this.props)
31+
:{}
32+
letdispatchProps=mapDispatchToProps
33+
?mapDispatchToProps(store.dispatch,this.props)
34+
:{}
3035
this.setState({
3136
allProps:{
3237
...stateProps,
38+
...dispatchProps,
3339
...this.props
3440
}
3541
})

‎src/component/ThemeSwitch.js‎

Lines changed: 50 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,56 @@
11
importReact,{Component}from'react'
22
importPropTypesfrom'prop-types'
3+
import{connect}from'./React-redux';
34

45
classThemeSwitchextendsComponent{
56
staticcontextTypes={
6-
store:PropTypes.object
7+
themeColor:PropTypes.string,
8+
onSwitchColor:PropTypes.func
79
}
810

9-
constructor(){
10-
super()
11-
this.state={
12-
themeColor:''
11+
handleSwitchColor(color){
12+
if(this.props.onSwitchColor){
13+
this.props.onSwitchColor(color)
1314
}
1415
}
1516

16-
componentWillMount(){
17-
const{ store}=this.context
18-
this._updateThemeColor()
19-
store.subscribe(()=>this._updateThemeColor())
20-
}
17+
//componentWillMount () {
18+
// const { store } = this.context
19+
// this._updateThemeColor()
20+
// store.subscribe(() => this._updateThemeColor())
21+
//}
2122

22-
_updateThemeColor(){
23-
const{
24-
store
25-
}=this.context
26-
conststate=store.getState()
27-
this.setState({
28-
themeColor:state.themeColor
29-
})
30-
}
23+
//_updateThemeColor () {
24+
// const {
25+
// store
26+
// } = this.context
27+
// const state = store.getState()
28+
// this.setState({
29+
// themeColor: state.themeColor
30+
// })
31+
//}
3132

32-
handleSwitchColor(color){
33-
const{
34-
store
35-
}=this.context
36-
store.dispatch({
37-
type:'CHANGE_COLOR',
38-
themeColor:color
39-
})
40-
}
33+
//handleSwitchColor (color) {
34+
// const {
35+
// store
36+
// } = this.context
37+
// store.dispatch({
38+
// type: 'CHANGE_COLOR',
39+
// themeColor: color
40+
// })
41+
//}
4142

4243
render(){
4344
return(
4445
<div>
4546
<button
46-
style={{color:this.state.themeColor}}
47+
style={{color:this.props.themeColor}}
4748
onClick={this.handleSwitchColor.bind(this,'red')}
4849
>
4950
Red
5051
</button>
5152
<button
52-
style={{color:this.state.themeColor}}
53+
style={{color:this.props.themeColor}}
5354
onClick={this.handleSwitchColor.bind(this,'blue')}
5455
>
5556
Blue
@@ -59,4 +60,23 @@ class ThemeSwitch extends Component {
5960
}
6061
}
6162

63+
constmapStateToProps=state=>{
64+
return{
65+
themeColor:state.themeColor
66+
}
67+
}
68+
69+
constmapDispatchToProps=dispatch=>{
70+
return{
71+
onSwitchColor:color=>{
72+
dispatch({
73+
type:'CHANGE_COLOR',
74+
themeColor:color
75+
})
76+
}
77+
}
78+
}
79+
80+
ThemeSwitch=connect(mapStateToProps,mapDispatchToProps)(ThemeSwitch)
81+
6282
exportdefaultThemeSwitch

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp