redux小白,想写一个用react-redux点击登录传递数据的demo,
index.js代码:
const store = createStore(reducer)
ReactDOM.render(
(
<Provider store = {store}>
<Router>
<div>
<Route exact path="/" component={App}/>
<Route path="/main" component={main}/>
</div>
</Router>
</Provider>
),
document.getElementById('root')
)
APP.js代码:
import React, {Component} from 'react';
import './App.css';
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import {login} from './action/action'
class App extends Component {
clickLogin(event) {
this.props.login;
this.props.history.push("/main/router");
}
render() {
return (
<div className="App">
<button onClick={this.clickLogin.bind(this)}>登录</button>
</div>
);
}
}
const mapStateToProps = (state, ownProps) => {
return {
msg: state.msg ? state.msg : ownProps.msg
}
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
login:bindActionCreators(login,dispatch)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(App)
action.js代码:
const actions = {
sendShowChineseMsg: () => ({ type: 'chinese' }),
sendShowEnglishMsg: () => ({ type: 'english' })
}
export function login() {
return dispatch=>{
dispatch(actions.sendShowChineseMsg())
}
}
reducer代码:
const reducer = (state = {}, action) => {
switch (action.type) {
case 'chinese':
return {
state,
msg: '这是Redux啊'
}
case 'english':
return {
state,
msg: "This is Redux"
}
default:
return state
}
}
export default reducer;
router代码:
import React, { Component } from 'react';
class router extends Component {
render() {
return (
<div className="App">
<h1>{this.props.msg}</h1>
</div>
);
}
}
export default router;
大神指点一下,哪里写的有问题,router里显示不出来msg的信息
改成这样