我试图在用户提交表单时分派(dispatch)一个 Action 。假设我有一个提交按钮,它会触发表单上的 onSubmit
事件(最终会在处理表单请求时显示一个微调图标,但此时,提交按钮只显示一个 true
或 false
值,表示正在显示微调器)。
LoginPage.js
import React from 'react';
import { Link } from 'react-router-dom';
export class LoginPage extends React.Component {
constructor(props) {
super(props);
this.handleLogin = this.handleLogin.bind(this);
}
handleLogin(e) {
e.preventDefault();
let email = document.getElementById('userEmail').value;
let password = document.getElementById('userPassword').value;
this.props.loginHandler(email, password);
}
render() {
return (
<form onSubmit={ this.handleLogin }>
<input type="submit" value={ this.props.requestingLogin } />
</form>
);
}
}
export default LoginPage;
LoginPageContainer.js
import React from 'react';
import { connect } from 'react-redux';
import LoginPage from '../../components/login/LoginPage';
import { loginUser } from '../../actions';
export class LoginPageContainer extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<LoginPage requestingLogin={ this.props.requestingLogin } loginHandler={ this.props.loginUser } />
);
}
}
const mapStateToProps = state => {
const { loginUserReducer } = state;
return {
requestingLogin: loginUserReducer.isRequestingLogin,
};
};
const mapDispatchToProps = dispatch => {
return {
loginUser: (email, password) => {
dispatch(loginUser(email, password));
}
}
};
export default connect(mapStateToProps, mapDispatchToProps)(LoginPageContainer);
index.js 在 Action /
export const REQUEST_LOGIN = 'REQUEST_LOGIN';
function requestLogin() {
return {
type: REQUEST_LOGIN,
};
};
export const loginUser = (email, password) => {
return dispatch => {
// this works because when the button is clicked,
// I can successfully console log in here.
dispatch(requestLogin); // THIS DISPATCH IS NOT WORKING
// API call here...
}
};
index.js 在reducers/
import { combineReducers } from 'redux';
import { REQUEST_LOGIN } from '../actions';
const initialLoginState = {
isRequestingLogin: false,
};
function loginUserReducer(state = initialLoginState, action) {
switch(action.type) {
case REQUEST_LOGIN:
return Object.assign({}, state, { isRequestingLogin: true });
default:
console.log('returned from default');
return state;
}
}
const allReducers = combineReducers({
loginUserReducer,
});
export default allReducers;
奇怪的是,在
dispatch()
中的 loginUser()
之后我的 API 调用有效,但 dispatch()
不起作用。我在网上看过很多教程,我的代码与我所看到的相匹配,但由于某种原因,我无法弄清楚为什么 dispatch action 不起作用。任何帮助将不胜感激。
最佳答案
问题在这里:
const mapDispatchToProps = dispatch => {
return {
loginUser: (email, password) => {
dispatch(loginUser(email, password)); [DISPATCH ACTION]
}
}
};
所以 loginUser 是一个函数,它接收电子邮件、密码和调用 dispatch(loginUser(email, password))
但是 loginUser(email, password) 不返回操作,而是返回一个函数。
export const loginUser = (email, password) => {
return dispatch => {
// this works because when the button is clicked,
// I can successfully console log in here.
dispatch(requestLogin); // THIS DISPATCH IS NOT WORKING
// API call here...
}
};
所以
[DISPATCH ACTION]
行不分派(dispatch) Action 而是分派(dispatch)函数。要使其正确,您可以更改如下:
const mapDispatchToProps = dispatch => {
return {
loginUser: (email, password) => {
loginUser(email, password)(dispatch);
}
}
};
所以, loginUser 返回一个函数,你用 dispatch 作为参数调用它。但是好像不好看。如何正确地做到这一点?
export const loginUser = dispatch => {
return (email, password) => {
// this works because when the button is clicked,
// I can successfully console log in here.
dispatch(requestLogin()); // THIS DISPATCH IS NOT WORKING
// API call here...
}
};
在 mapDispatchToProps 中:
const mapDispatchToProps = dispatch => {
return {
loginUser: loginUser(dispatch)
}
};
关于javascript - Redux Action 调度不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47564792/