Reducer not receiving action in redux

Question

I'm trying to implement redux in my react project but I can't seem to fix this problem I came across. When I click on a submit button I'm firing off a dispatch action to my reducer which in this case should set the prop "loading" to true. I know that the action is getting called correctly because it logs to the console when the action is called but there are no logs from the reducers (I've coded the reducer to log when it is called). I can, however, see previous reducers getting called in the setup (init calls and etc.) This is my reducer code which I'm currently using:

import { ADD_PRODUCT_STARTED, ADD_PRODUCT_SUCCESS, ADD_PRODUCT_FAILURE } from '../actions/types'

const initialState = {
    products: [
        {
            name: 'Friends t-shirt',
            price: '50',
            img: 'https://static.bershka.net/4/photos2/2019/I/0/1/p/7337/058/250/7337058250_1_1_3.jpg',
            id: 1
        },
        {
            name: 'Computer',
            price: '50',
            img: 'https://cdn.def-shop.com/cdn-cgi/image/w=530,q=95,f=auto/images/product_images/picture1300x1725_images/619532_0.jpg',
            id: 2
        },
        {
            name: 'IPhone',
            price: '50',
            img: 'https://cdn.def-shop.com/cdn-cgi/image/w=530,q=95,f=auto/images/product_images/picture1300x1725_images/619532_0.jpg',
            id: 3
        }
    ],
    loading: false,
    error: null
};

const productsReducer = (state = initialState, action) => {
    console.log(action.type, ADD_PRODUCT_STARTED)
    switch (action.type) {
        case ADD_PRODUCT_STARTED:
            console.log('Reducing started...')
            return {
                ...state,
                loading: true
            };
        case ADD_PRODUCT_SUCCESS:
            return {
                ...state,
                loading: false,
                error: null,
                todos: [...state.todos, action.payload]
            };
        case ADD_PRODUCT_FAILURE:
            return {
                ...state,
                loading: false,
                error: action.payload.error
            };
        default:
            return state;
    }
}

export default productsReducer

And this is the action code

import { ADD_PRODUCT_STARTED, ADD_PRODUCT_SUCCESS, ADD_PRODUCT_FAILURE } from './types'

const addProduct = (name, price) => {
    return dispatch => {
        console.log('Dispatching action...')
        dispatch(addProductStarted)
        console.log(`Action dispatched: ${addProductStarted}`)


        // Perform actions here then: .then() => dispatch(addProductSuccess) and .catch() => dispatch(addProductFailure)
    }


}

const addProductStarted = () => {
    return {
        type: ADD_PRODUCT_STARTED
    }
}

const addProductSuccess = (product) => {
    return {
        type: ADD_PRODUCT_STARTED,
        payload: {
            ...product
        }
    }
}

const addProductFailure= (err) => {
    return {
        type: ADD_PRODUCT_STARTED,
        payload: {
            ...err
        }

    }
}

if(ADD_PRODUCT_SUCCESS && ADD_PRODUCT_FAILURE && addProductSuccess && addProductFailure){
    console.log('Ignore thihihi')
}



export default addProduct

Thank you for any help because I'm really struggling with this!

Answer 1

You are not actually dispatching the action.

This line is wrong:

dispatch(addProductStarted)

Remember that dispatching involves passing an action object to dispatch, like:

dispatch({type: "increment"})

We commonly use action creator functions to generate those action objects. That means you have to call the action creator to get the action object:

const action = increment();
dispatch(action);

You're not calling the action creator. You're passing it directly.

The right syntax is:

dispatch(addProductStarted())