未分发React Redux操作但请求成功

Question

I'm trying to implement authentication on my project, as title says it registers an user but actions are not dispatched. I have almost the same action for fetching data, it works, dispatches the actions. is the function:

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
      }))
}

Reducer:

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

  }
}

connect method:

export default connect(null, { signIn })(RegisterForm);

Register Form component code(just to satisfy Stackoverflow's wishes):

 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); 

Answer 1

您的代码似乎很好，请确保正确实现了redux-devtools 。

const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(thunk)) // [, rest of middlewares]

Answer 2

Did you use bindActionCreators inside your component? in handleSubmit you just called action without dispatching it