javascript - mapStateToProps 未运行
问题描述
我是新来的反应,我无法调试为什么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')
);
应用程序.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);
登录页面.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);
解决方案
我认为是 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' })
}
}