- 45
- 0
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的信息
0
打赏
收藏
点击回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
