[英]React Redux action not dispatched but request is successful
我正在嘗試在我的項目上實施身份驗證,正如標題所述,它注冊了一個用戶,但未分派動作。 我有幾乎相同的操作來獲取數據,它可以工作,可以調度這些操作。 是功能:
export const signIn = data => dispatch => {
dispatch({
type: SIGN_UP
})
fetch(API_URL+'/register', {
method: 'POST',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(message => dispatch({
type: SIGN_UP_SUCCESS, payload: message
}))
.catch(error => dispatch({
type: SIGN_UP_FAILED, payload: error
}))
}
減速器:
export const authReducer = (state = initialState, action) => {
switch(action.type) {
case SIGN_UP:
return {
...state,
loading: true
}
case SIGN_UP_SUCCESS:
return {
...state,
loading: false,
message: action.payload
}
case SIGN_UP_FAILED:
return {
...state,
loading: false,
error: action.payload
}
default:
return state
}
}
連接方法:
export default connect(null, { signIn })(RegisterForm);
注冊表單組件代碼(僅滿足Stackoverflow的願望):
import React, { Component } from 'react'; import { connect } from 'react-redux'; import { Form, Button, Message, Field } from 'semantic-ui-react'; import validator from 'email-validator'; import { signUp } from '../../actions/authActions'; class RegisterForm extends React.Component { constructor(props) { super(props) this.state = { data: { username: '', name: '', email: '', password: '', city: '', address: '' }, errors: {} } this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange = e => { this.setState({ ...this.state, data: { ...this.state.data, [e.target.name]: e.target.value} }) } handleSubmit = e => { console.log(this.state.data) e.preventDefault(); const errs = this.validate(this.state.data); this.setState({ errors: errs }); if(Object.keys(this.state.errors).length === 0) { this.props.signUp(this.state.data) } } validate = data => { const errors = {}; if(!data.username) errors.username = 'Username is required'; if(!data.name) errors.name = 'Name is required'; if(!data.email) errors.email = 'Email is required'; if (!validator.validate(data.email)) errors.email = "Invalid email"; if(!data.password) errors.password = 'Password is required'; if(!data.city) errors.city = 'City is required'; if(!data.address) errors.address = 'Address is required' return errors } render() { const { errors, data } = this.state return <Form onSubmit={this.handleSubmit}> <Form.Field> <label>Username</label> <input placeholder='Username' name="username" type="text" onChange={this.handleChange} value={this.state.data.username} /> </Form.Field> {errors.username && <Message error header={errors.username}/>} <Form.Field> <label>Name</label> <input placeholder='Name' name="name" type="text" onChange={this.handleChange} value={this.state.data.name} /> </Form.Field> {errors.name && <Message error header={errors.name}/>} <Form.Field> <label>Address</label> <input placeholder='Address' name="address" type="text" onChange={this.handleChange} value={this.state.data.address} /> </Form.Field> {errors.address && <Message error header={errors.address}/>} <Form.Field> <label>City</label> <input placeholder='City' name="city" type="text" onChange={this.handleChange} value={this.state.data.city} /> </Form.Field> {errors.city && <Message error header={errors.city}/>} <Form.Field> <label>Email</label> <input placeholder='Email' name="email" type="email" onChange={this.handleChange} value={this.state.data.email} /> </Form.Field> {errors.email && <Message error header={errors.email}/>} <Form.Field> <label>Password</label> <input placeholder='Password' name="password" type="password" onChange={this.handleChange} value={this.state.data.password} /> </Form.Field> {errors.password && <Message error header={errors.password}/>} <Button type='submit'>Register</Button> </Form> } } export default connect(null, { signUp })(RegisterForm);
您的代碼似乎很好,請確保正確實現了redux-devtools
。
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(thunk)) // [, rest of middlewares]
您是否在組件內使用bindActionCreators? 在handleSubmit中,您只是調用了action,而沒有調度它
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.