我正在我的React应用程序中创建登录,注册功能。
使用this.props.dispatch时,我总是得到this.props.dispatch is not a function error
否则,我得到的Object(..)
不是函数。
请帮助!
这是用于注册用户文件名Register.js
submitForm = event => {
event.preventDefault();
let dataToSubmit = {
email: this.state.email,
password: this.state.password,
passwordConfirmation: this.state.passwordConfirmation,
name: this.state.name,
lastname: this.state.lastname
};
if (this.isFormvalid(this.state)) {
this.setState({ errors: [] })
this.props.dispatch(registerUser(dataToSubmit))
.then(response => {
alert('reg suucefully')
this.props.history.push('/login2')
}
)
.catch(err => {
alert("Sorry! product failed to upload")
console.log(err)
this.setState({
errors: this.state.errors.concat(err)
});
})
}
else {
console.error('form not valid')
}
}
// in render i made a button like this
<button className='btn waves-effect red lighten-2'
type='submit'
name='action'
onClick={this.submitForm}
>
Create an account
</button>
从registerUser
获得了user_actions.js
import {
LOGIN_USER,
REGISTER_USER,
AUTH_USER,
LOGOUT_USER,
} from '../constants/user_constants';
const registerUser = (dataToSubmit) => {
const request = axios.post(`http://localhost:8000/api/users/register`, dataToSubmit)
.then(response => response.data);
return {
type: REGISTER_USER,
payload: request
}
}
export default { loginUser, registerUser};
这是用户减少量
import {
LOGIN_USER,
REGISTER_USER,
AUTH_USER,
LOGOUT_USER,
} from '../constants/user_constants';
function userReducer(state = {}, action) {
switch (action.type) {
case REGISTER_USER:
return { ...state, register: action.payload }
case LOGIN_USER:
return { ...state, loginSucces: action.payload }
case AUTH_USER:
return { ...state, userData: action.payload }
default:
return state;
}
}
export default userReducer;