账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    新手学习react-redux问题
    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
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部