单击按钮时不会调用Redux Dispach Method

Question

我是redux的新手，在我当前的项目中使用redux。在我的项目中我有LogIn表单，其中有SignIn按钮我附带了一个带有onClick的调度程序，但它没有被触发。我无法找到问题。下面是代码。

LoginContainer.js

import {connect} from "react-redux";
import {LoginForm} from "../components/login/loginForm";
import {afterLogin} from "../actions/menu";

const mapStateToProps = (state) => {
    return {
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        onSignInClick: () => {
            console.log("hi Naresh");
            dispatch(afterLogin());
        }
    };
};

const LoginFormContainer = connect(mapStateToProps, mapDispatchToProps)(LoginForm);
export default LoginFormContainer;

login.js

import React, {PropTypes} from "react";
import LoginFormContainer from "../../containers/login";

export const LoginPage = () => {
    return (
        <div class="page-content">
            <div class="container" id="loginPage">
                <div class="row">
                    <h1 class="style-title verticle-center">Sign In</h1>
                    <div class="divider"></div>
                    <LoginFormContainer />
                </div>
            </div>
        </div>
    );
};

LoginForm.js

import React, {PropTypes} from "react";

export const LoginForm = ({onSignInClick, onUsernameChange}) => {
    return (
        <form class="col s6" id="loginform">
            <div class="row">
                <div class="input-field col s10 offset-s1">
                    <input
                        placeholder="Username or Email"
                        id="Username"
                        type="text"
                        class="validate"></input>
                    <label for="Username"></label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s10 offset-s1">
                    <input placeholder="Password" id="password" type="password" class="validate"></input>
                    <label for="password"></label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s5">
                    <p >
                        <input type="checkbox" class="filled-in" id="filled-in-box" defaultChecked="checked"></input>
                        <label for="filled-in-box">Remember Me</label>
                    </p>
                </div>
                <div class="input-field col s5 offset-s2 text-center">
                    <a href="#" class="waves-effect waves-light btn signIn" onClick={() => onSignInClick()}>Sign In
                        <i class="mdi mdi-transfer verticle-center"></i>
                    </a>
                </div>
            </div>
        </form>
    );
};

App.js

import React from "react";
import {render} from "react-dom";
import {Provider} from "react-redux";
import {applyMiddleware, createStore, compose} from "redux";
import {dashBoardReducer} from "./reducer";
import {DashBoard} from "./components/dashboard";
import {LoginPage} from "./components/login";
import logger from "redux-logger";
import thunk from 'redux-thunk';
import {Router, Route, Link, browserHistory, IndexRoute} from "react-router";


const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
let store = createStore(dashBoardReducer, composeEnhancers(applyMiddleware(logger(), thunk)));

render(
  <Provider store={store}>
  <Router history={browserHistory}>
    <Route path="/" component={DashBoard}>
    <IndexRoute component={LoginPage}/>
    </Route>
  </Router>
</Provider>, document.getElementById("app"));

reducer.js

import {LOGGED_IN} from "../actions/menu";
import {combineReducers} from "redux";

const AFTER_LOGIN_MENU = [
    "My Financial Health",
    "Protection",
    "Savings",
    "Wealth Enhancement",
    "Expense Manager",
    "Goals",
    "Banking",
    "ncome Tax"
];

export function menuCategories (state = ["Login"], action) {
    switch (action.type) {
    case LOGGED_IN:
        return state.concat(AFTER_LOGIN_MENU);
    default:
        return state;
    }
}

export const dashBoardReducer = combineReducers({menuCategories});