{"id":82,"date":"2019-05-03T03:51:15","date_gmt":"2019-05-03T03:51:15","guid":{"rendered":"https:\/\/www.369usa.com\/blog\/?p=82"},"modified":"2019-05-03T03:51:31","modified_gmt":"2019-05-03T03:51:31","slug":"react-redux-counter%e4%bb%a5%e5%8f%8areducer-mapstatetoprops-%e5%92%8c-mapdispatchtoprops%e4%be%8b%e5%ad%90","status":"publish","type":"post","link":"https:\/\/www.369usa.com\/blog\/react-redux-counter%e4%bb%a5%e5%8f%8areducer-mapstatetoprops-%e5%92%8c-mapdispatchtoprops%e4%be%8b%e5%ad%90\/","title":{"rendered":"React-Redux Counter\u4ee5\u53caReducer, mapStateToProps \u548c mapDispatchToProps\u4f8b\u5b50"},"content":{"rendered":"

Source code Github location:
\nhttps:\/\/github.com\/howareyoucolin\/React-Redux-Counter<\/a><\/p>\n

Reducer<\/p>\n

const initialState = {\r\n\tcount: 10\r\n};\r\n\r\nfunction rootReducer(state = initialState, action) {\r\n\tif(action.type == 'INCREASE_COUNT'){\r\n\t\treturn {\r\n\t\t\t...state,\r\n\t\t\tcount: (state.count + 1) > 20 ? 20 : state.count + 1\r\n\t\t}\r\n\t}\r\n\telse if(action.type == 'DECREASE_COUNT'){\r\n\t\treturn {\r\n\t\t\t...state,\r\n\t\t\tcount: (state.count - 1) < 0 ? 0 : state.count - 1\r\n\t\t}\r\n\t}\r\n\treturn state;\r\n};\r\n\r\nexport default rootReducer;\r\n<\/pre>\n
mapStateToProps \u4f8b\u5b50:<\/p>\n
import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { connect } from 'react-redux';\r\n\r\n\/\/Import scss\r\nimport '.\/scss\/screen.scss';\r\n\r\n\/\/Component A\r\nclass Screen extends React.Component {\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<div className=\"screen\">\r\n\t\t\t\t{ this.props.count }\r\n\t\t\t<\/div>\r\n\t\t)\r\n\t}\r\n};\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn { count: state.count };\r\n};\r\n\r\nexport default connect(mapStateToProps)(Screen);\r\n<\/pre>\n
mapDispatchToProps \u4f8b\u5b50:<\/p>\n
import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { connect } from 'react-redux';\r\n\r\n\/\/Import scss\r\nimport '.\/scss\/btn.scss';\r\n\r\n\/\/Component A\r\nclass Btn extends React.Component {\r\n\t\r\n\tclickHandler = () => {\r\n\t\tif(this.props.sign == '+') this.props.increment();\r\n\t\tif(this.props.sign == '-') this.props.decrement();\r\n\t}\r\n\t\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<div className=\"btnWrap\">\r\n\t\t\t\t<button onClick={this.clickHandler}> {this.props.children} <\/button>\r\n\t\t\t<\/div>\r\n\t\t)\r\n\t}\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tincrement:() => {\r\n\t\t\tdispatch({type:'INCREASE_COUNT'});\r\n\t\t},\r\n\t\tdecrement:() => {\r\n\t\t\tdispatch({type:'DECREASE_COUNT'});\r\n\t\t}\r\n\t}\r\n}\r\n\r\nexport default connect(null,mapDispatchToProps)(Btn);\r\n<\/pre>\n
Counter \u4f5c\u7528\u5c55\u793a:
\n