Редуктор не получает действие в редуксе

Question

Я пытаюсь внедрить избыточность в свой реактивный проект, но не могу решить эту проблему, с которой столкнулся. Когда я нажимаю на кнопку «Отправить», я запускаю диспетчерское действие для моего редуктора, который в этом случае должен установить для параметра «loading» значение true. Я знаю, что действие вызывается правильно, потому что оно регистрируется на консоли, когда вызывается действие, но нет журналов от редукторов (я кодировал редуктор для записи при его вызове). Однако я могу видеть, как в настройках вызывались предыдущие редукторы (init-вызовы и т. Д. c.). Это мой код-редуктор, который я сейчас использую:

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

И это код действия

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

Спасибо за любую помощь, потому что я действительно борюсь с этим!

Answer 1

Вы на самом деле не отправляете действие.

Эта строка неверна:

dispatch(addProductStarted)

Помните, что отправка включает в себя передачу объекта действия в dispatch, например:

dispatch({type: "increment"})

Мы обычно используем функции создателя действий для генерации этих объектов действий. Это означает, что вы должны вызвать создателя действия, чтобы получить объект действия:

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

Вы не вызываете создателя действия. Вы передаете напрямую.

Правильный синтаксис:

dispatch(addProductStarted())