还原剂在废品中不受作用

Question

我试图在我的react项目中实现redux，但是我似乎无法解决我遇到的这个问题。当我单击提交按钮时，我将向还原器发送一个调度操作，在这种情况下，应该将支柱“加载”设置为true。我知道操作被正确地调用，因为它在调用操作时登录到控制台，但是没有来自还原器的日志(我已经编写了还原器，以便在调用时记录)。然而，我可以看到以前的还原器在设置中被调用(init调用等等)。这是我目前正在使用的还原器代码：

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