reactjs - Why dispatch in my react app is not working?

Question

I'm using redux for the first time. I'm not much familiar with it.I want to call createTicket function when submit button clicked and for the instance I need to do console log. ticketAction.js

import _ from 'lodash';

import TicketService from './../AddTicketService';
import * as ActionTypes from './../actionTypes/tickets.ActionTypes';

export const createTicket = (formData) => {
  console.log("1");
  return (dispatch) => {
    dispatch({
      type: ActionTypes.CREATE_TICKET_IN_PROGRESS
    });

    console.log(formData);
    const formattedFormData = {
      ...formData,
    };

    TicketService.create(
      formattedFormData
    )
      .then(() => dispatch({ type: ActionTypes.CREATE_TICKET_COMPLETED }))
      .catch((error) =>
        dispatch({
          type: ActionTypes.CREATE_TICKET_FAILED,
          payload: error.response.data
        })
      );
  };
};

It logs 1 in the console.But rest inside the return is not working.

Below is the reducer file ticketsReducer.js

import * as ActionTypes from './../actionTypes/tickets.ActionTypes';
// import _ from 'loadash';

const initialState = {
  createTicketStatus: {
    inProgress: false,
    error: null
  }
};

export default (state = initialState, action) => {
  switch (action.type) {
    case ActionTypes.CREATE_TICKET_IN_PROGRESS:
        console.log('CREATE_TICKET_IN_PROGRESS');
      return {
        ...state,
        createTicketStatus: {
          inProgress: true,
          error: null
        }
      };
    case ActionTypes.CREATE_TICKET_COMPLETED:
      return {
        ...state,
        createTicketStatus: {
          inProgress: false,
          error: null
        }
      };
    case ActionTypes.CREATE_TICKET_FAILED:
      return {
        ...state,
        createTicketStatus: {
          inProgress: false,
          error: action.payload
        }
      };

      default: // need this for default case
      return state 
   
  }
};

question from:https://stackoverflow.com/questions/65880142/why-dispatch-in-my-react-app-is-not-working

Answer 1

Found the error ! Instead if importing and calling this function createTicket, we have to call it using props. this.props.createTicket(data); If you need more clarifications do let me know!