时间戳

首页 > 解决方案 > 无法在 React 中调度两个动作，状态没有正确更新

javascript - 无法在 React 中调度两个动作，状态没有正确更新

问题描述

在一个组件中，我试图从两个不同的减速器分派两个不同的动作。他们正在更新我的应用程序中的不同状态。这是组件的部分代码：

    onSubmit = e => {
        e.preventDefault()
        const food = {
            date: this.state.date,
            mealCategory: this.state.mealCategory
        }
        this.props.addFood(food) //from mapDispatch to props updates the food state, viewing in redux tools shows proper state for food
        const meal = this.props.food //comes from mapStateToProps 
        console.log(meal, 'in form') //logging this shows it's not the updated state I am expecting
        this.props.addMeal(meal) //trying to update state from food reducer to the meal reducer, meal reducer is not updated via redux tools
    }
.
.
...

const mapDispatchToProps = (dispatch) => ({
    addFood: food => dispatch(addFood(food)),
    addMeal: meal => dispatch(addMeal(meal))
})

const mapStateToProps = state => ({
    food: state.food
})

export default connect(mapStateToProps, mapDispatchToProps)(AddFoodForm)

当我检查 redux 工具时，我的食物状态显示正确。但是，在我的函数中将该状态添加到用餐会const meal = this.props.food显示一个未更新的状态以及this.props.addFood(food)从我的食物减速器调度操作的调用。我知道更新是异步的。如何正确更新状态？

澄清一下，我的 foodReducer 负责获取并通过表单将其他属性添加到 foodReducer 的状态。按下提交按钮后，我就拥有了我需要的所有属性的状态。我想采用最终状态并将其传递给我的 foodsReducer。我不能使用 food 变量，因为这只是我想要的状态属性的一个子集。不确定，如果我正确理解了您的建议。

我的 foodReducer 案例：

case 'ADD_FOOD':
            {
                const { date, mealCategory } = action.payload
                const itemDetails = {
                    date,
                    mealCategory
                }
                return { ...state, ...itemDetails }
            }

这带来了我想通过 mealReducer 案例添加的最终状态：

const mealReducer = (state = [], action) => {
    switch (action.type) {
        case 'ADD_MEAL': {
            console.log(action.payload);
            const meal  = action.payload
            console.log(meal);
            return [...state, meal]
        }
        default:
            return state
    }
}

标签： javascriptreactjsreduxdispatch

解决方案

根据您的评论，我能够提出解决方案。我在进餐动作文件中导入了 addFood 动作，并使用 Thunk 获取状态以调用 addMeal 动作。

export const addFoodToMeal = (food) => {
    return (dispatch, getState) => {
        dispatch(addFood(food))
        const meal = getState().food
        return dispatch(addMeal(meal))
    }
}

推荐阅读