鍍金池/ 問答/HTML5  HTML/ 新手學習react-redux問題

新手學習react-redux問題

redux小白，想寫一個用react-redux點擊登錄傳遞數(shù)據(jù)的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的信息

回答
編輯回答
淚染裳
const reducer = (state = {}, action) => {
    switch (action.type) {
        case 'chinese':
            return {
                ...state,
                ...{msg: '這是Redux啊'}
            }
        case 'english':
            return {
                ...state,
                ...{msg: "This is Redux"}
            }
        default:
            return state
    }
}

改成這樣

2017年7月15日 09:26