React Redux - 使用功能组件与 useDispatch 与类组件和 mapStateToProps 的混淆

Question

我试图让用户能够从所有可能项目的列表中单击一个项目，并打开一个模式以显示有关该项目的数据（包括他们拥有的当前数量）和用于增加/减少该数量的按钮.

据我了解，因为我只是显示正在传入的数据，然后调度一个动作来更新存储，我应该使用功能组件来显示数据并使用 Dispatch 来调用存储动作。

目前，当我更新商店时，我在 Redux 调试工具中看到了更改，但更改不会反映在模式中，直到我重新打开它。虽然我一直在寻找这个问题的答案，但我看到了许多类似的问题，但它们都使用类组件和 mapStateToProps（例如this post）。我认为最佳实践是除非需要，否则使用功能组件。我是否错误地认为如果我从功能组件中的商店获取值，它应该在更改时更新？

代码片段

• 对话框

export default function ItemDialog({
    ...
    selectedItem,
}) {
    const dispatch = useDispatch()
    const inventory = useSelector(
        state => state.user.inventory
    )
    let userItem = inventory.find(
        userItem => userItem.name === selectedItem.name
    )

    const changeItemCount = (item, change) => {
        item.change = change
        dispatch({
            type: "USER_INVENTORY_UPDATED",
            payload: item
        })
    }

    const showQuantity = userItem => {
        return userItem.quantity > 0 ? `(${userItem.quantity})` : ""
    }
...

render(
    <p className="text-xl text-center font-semibold">
        {selectedItem.name}
    </p>
    <p className="text-center font-light">
        {showQuantity(userItem)}
    </p>

    ...
    <AddBoxIcon
        onClick={() => changeItemCount(selectedItem, 1)}
    />
)

• 商店

const userReducer = (state = InitialUserState, action) => {
    let inventoryCopy = { ...state.inventory }

    switch (action.type) {
        case "USER_INVENTORY_UPDATED":
            let category = action.payload.category
            let updatedItemIndex = inventoryCopy[category].findIndex(
                item => item.name === action.payload.name.toUpperCase()
            )

            // If item is already there
            if (updatedItemIndex >= 0) {
                inventoryCopy[category][updatedItemIndex].quantity +=
                    action.payload.change
            } else {
                // If item needs to be added to inventory category
                let newItem = {
                    name: action.payload.name,
                    quantity: action.payload.change
                }
                inventoryCopy[category].push(newItem)
            }

            return {
                ...state,
                inventory: inventoryCopy
            }

            ...

            default:
            return state
    }
}

Answer 1

在您返回更新后的状态时检查您的扩展运算符。您可能需要深度克隆旧状态，具体取决于它有多少嵌套对象。

The docs 有更多关于浅层克隆对象的信息。

深度克隆你的状态对象将帮助你摆脱：

let inventoryCopy = { ...state.inventory }