javascript - mapStateToProps 未运行

Question

我是 react 新手，无法调试为什么 mapStateToProps 没有运行。请参阅 login.js 中的最后一个函数。

我已在 mapStateToProps 函数中添加了警报语句，但它只是没有运行。不知道去哪里寻找问题。

store.js

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from '../reducers';


export const store = createStore(
    rootReducer,
    applyMiddleware(thunkMiddleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

index.js:

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';

import { store } from './helpers';
import { App } from './App';
import { configureFakeAPI } from './helpers';

configureFakeAPI();

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('app')
);

App.js

import React from 'react';
import { Router, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import { PrivateRoute } from './PrivateRoute.js';
import { history } from './helpers';
import { alertActions } from './actions';
import { HomePage } from './components/HomePage';
import LoginPage  from './components/LoginPage';
import { RegisterPage } from './components/RegisterPage';

export class App extends React.Component {
    constructor(props) {
        super(props);

        const { dispatch } = this.props;
        history.listen((location, action) => {
        });
    }

    render() {
        const { alert } = this.props;
        return (
              <div className="container">
                  <div className="col-sm-8 col-sm-offset-2">
                              <LoginPage />
                  </div>
              </div>
        );
    }
}

function mapStateToProps(state) {
    const { alert } = state;
    return {
        alert
    };
}
export default connect(mapStateToProps)(App);

LoginPage.js

import React from 'react';
import {Component} from 'react';
import {Link} from 'react-router-dom';
import {connect} from 'react-redux';

import {userActions} from '../actions';
import {userConstants} from "../constants";

class LoginPage extends Component {
    constructor(props) {
        super(props);

        // reset login status

        this.state = {
            username: '',
            password: '',
            submitted: false
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange = (e) => {
        let formControlName = e.target.name;
        let value = e.target.value;
        this.setState({
            [formControlName]: value
        });
    };

    handleSubmit = (e) => {
        e.preventDefault();
        this.sendTheAlert();
    }

    render() {
        const {username, password, submitted} = this.state;
        return (
            <div className="col-md-6 col-md-offset-3">
                <i>{JSON.stringify(this.state)}</i>
                <h2>Login</h2>
                <form name="form" onSubmit={this.handleSubmit}>
                    <div className={'form-group' + (submitted && !username ? ' has-error' : '')}>
                        <label htmlFor="username">Username</label>
                        <input type="text" className="form-control username" name="username"
                               onChange={this.handleChange}/>
                        {submitted && !username &&
                        <div className="help-block">Username is required</div>
                        }
                    </div>
                    <div className={'form-group' + (submitted && !password ? ' has-error' : '')}>
                        <label htmlFor="password">Password</label>
                        <input type="password" className="form-control" name="password" onChange={this.handleChange}/>
                        {submitted && !password &&
                        <div className="help-block">Password is required</div>
                        }
                    </div>
                    <div className="form-group">
                        <button className="btn btn-primary">Login</button>
                        <a className="btn btn-link">Register</a>
                    </div>
                </form>
            </div>
        );
    }
}

function mapStateToProps(state) {
    // const { todos } = state;
    // return { todoList: todos.allIds };
    return {};

}

// function mapDispatchToProps(dispatch) {
//     alert();
//     return ({
//         sendTheAlert: () => {
//             dispatch(userConstants.LOGIN_REQUEST)
//         }
//     })
// }

const mapDispatchToProps = (dispatch) => ({ <====== NOT RUNNING
    sendTheAlert(coin) {
        debugger;
        alert();
        dispatch(userConstants.LOGIN_REQUEST) }
})

export default connect(mapStateToProps, mapDispatchToProps)(LoginPage); 

Answer 1

我认为是mapDispatchToProps 不起作用，对吧？试试这个

...    
const mapDispatchToProps = (dispatch) => (
    return { 
        sendTheAlert(coin) {
            debugger;
            alert();
            return dispatch(userConstants.LOGIN_REQUEST) }
    })

如何构造 mapDispatchToProps 的示例如下(来自 https://react-redux.js.org/using-react-redux/connect-mapdispatch )。请注意返回声明。

const mapDispatchToProps = dispatch => {
  return {
    // dispatching plain actions
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
    reset: () => dispatch({ type: 'RESET' })
  }
}