\u4e00\u4e2a\u5c0f\u4f8b\u5b50 to play around React-Redux:<\/p>\n
\r\n\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { createStore } from 'redux'\r\n\r\n\r\nlet initialState = {\r\n\tcount : 0,\r\n} \r\nfunction reducer(state = initialState, action) {\r\n switch (action.type) {\r\n case 'INCREMENT':\r\n return {...state, count: state.count + 1};\r\n case 'DECREMENT':\r\n return {...state, count: state.count - 1};\r\n default:\r\n return state;\r\n }\r\n}\r\n\r\nlet store = createStore(reducer);\r\n\r\nconst Message = function(props){\r\n\tlet _style = {\r\n\t\tmargin:'100px auto',\r\n\t\tfontSize:'50px',\r\n\t\ttextAlign:'center'\r\n\t}\r\n\treturn (\r\n\t\t<div style={_style}>Counter : {props.counter}<\/div>\r\n\t);\r\n}\r\n\r\nclass App extends React.Component{\r\n\t\r\n\tconstructor(props){\r\n\t\tsuper(props);\r\n\t\tthis.state = {\r\n\t\t\tcounter : 0\r\n\t\t}\r\n\t\tstore.subscribe(() => {\r\n\t\t\tthis.setState({counter: store.getState().count});\r\n\t\t});\r\n\t\t\/\/this.increaseCounter = this.increaseCounter.bind(this);\r\n\t}\r\n\t\r\n\tincreaseCounter = () => {\r\n\t\tstore.dispatch({ type: 'INCREMENT' });\r\n\t}\r\n\t\r\n\tdecreaseCounter = () => {\r\n\t\tstore.dispatch({ type: 'DECREMENT' });\r\n\t}\r\n\t\r\n\trender(){\r\n\t\tlet _style = {\r\n\t\t\tmargin:'0 auto',\r\n\t\t\ttextAlign:'center'\r\n\t\t}\r\n\t\treturn (\r\n\t\t\t<div style={_style}>\r\n\t\t\t\t<Message counter={this.state.counter}\/>\r\n\t\t\t\t<button onClick={this.increaseCounter}>Increment<\/button>\r\n\t\t\t\t<button onClick={this.decreaseCounter}>Decrement<\/button>\r\n\t\t\t<\/div>\r\n\t\t)\r\n\t}\r\n\t\r\n} \r\n\r\n\r\nReactDOM.render(\r\n\t<App \/>\r\n\t,\r\n\tdocument.getElementById('root')\r\n);\r\n\r\n<\/pre>\n\u4ee5\u4e0b\u662f\u4f7f\u7528react-redux\u7684\u65b9\u5f0f,\u4ee5\u4f5c\u5bf9\u6bd4:<\/p>\n
\r\n\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { createStore } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { Provider } from "react-redux";\r\n\r\n\r\nlet initialState = {\r\n\tcount : 0,\r\n} \r\nfunction reducer(state = initialState, action) {\r\n switch (action.type) {\r\n case 'INCREMENT':\r\n return {...state, count: state.count + 1};\r\n case 'DECREMENT':\r\n return {...state, count: state.count - 1};\r\n default:\r\n return state;\r\n }\r\n}\r\n\r\nlet store = createStore(reducer);\r\n\r\n\r\nconst Message = function(props){\r\n\tlet _style = {\r\n\t\tmargin:'100px auto',\r\n\t\tfontSize:'50px',\r\n\t\ttextAlign:'center'\r\n\t}\r\n\treturn (\r\n\t\t<div style={_style}>Counter : {props.counter}<\/div>\r\n\t);\r\n}\r\n\r\nclass App extends React.Component{\r\n\t\r\n\tconstructor(props){\r\n\t\tsuper(props);\r\n\t}\r\n\t\r\n\tincreaseCounter = () => {\r\n\t\tthis.props.increment();\r\n\t}\r\n\t\r\n\tdecreaseCounter = () => {\r\n\t\tthis.props.decrement();\r\n\t}\r\n\t\r\n\trender(){\r\n\t\tlet _style = {\r\n\t\t\tmargin:'0 auto',\r\n\t\t\ttextAlign:'center'\r\n\t\t}\r\n\t\treturn (\r\n\t\t\t<div style={_style}>\r\n\t\t\t\t<Message counter={this.props.counter}\/>\r\n\t\t\t\t<button onClick={this.increaseCounter}>Increment<\/button>\r\n\t\t\t\t<button onClick={this.decreaseCounter}>Decrement<\/button>\r\n\t\t\t<\/div>\r\n\t\t)\r\n\t}\r\n\t\r\n} \r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn { counter: state.count };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n\treturn {\r\n\t\tincrement:() => {\r\n\t\t\tdispatch({type:'INCREMENT'});\r\n\t\t},\r\n\t\tdecrement:() => {\r\n\t\t\tdispatch({type:'DECREMENT'});\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\/\/Just another higher order component to me:\r\nconst AppWrap = connect(mapStateToProps,mapDispatchToProps)(App);\r\n\r\n\r\nReactDOM.render(\r\n\t<Provider store={store}>\r\n\t\t<AppWrap \/>\r\n\t<\/Provider>\r\n\t,\r\n\tdocument.getElementById('root')\r\n);\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"