我是新来的反应者,我无法调试为什么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);
我是新来的反应者,我无法调试为什么mapStateToProps没有运行。请查看login.js中的最后一个函数。我在mapStateToProps函数中添加了警报语句,但是它没有运行。 ...
您没有调用连接功能。您应该做的不仅仅是在这里将其导出:
我认为是mapDispatchToProps无法正常工作,对吗?试试这个
一切都很好,我只是打错了this.sendTheAlert()
。应该是this.props.sendTheAlert()