React Redux action not dispatched but request is successful

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

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

Answer 2

Your code seems to be fine, make sure your redux-devtools is implemented correctly.

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