Javascript 单击按钮时未调用Redux Dispach方法

我不熟悉redux并在当前项目中使用redux。在我的项目中，我有一个带有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>
    );
};

---

这部分看起来不错，你的错误是什么？你在前面提供了存储吗？@SteevePitis如果我在LoginForm.js中直接调用onSignnclick（），那么它工作正常，但我只想在用户单击SignIn按钮时发送操作，这就是为什么我将其包装在带有箭头函数的对象中，但不使用onSignnclick（）不会被调用我不明白。。。如果你做了

onClick={onSignInClick}

它可以工作，但不是你想要的？@SteevePitis no-onClick={onSignInClick}也不工作…..当我点击SignIn时，什么都没有发生。这很奇怪，我在这里没有看到任何错误。。。您是如何配置您的

redux商店的

？

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>
    );
};

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"));

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});