Question

我看过以下代码：

switch_to_alert()

但是不明白为什么我们每次都要使用... state。

我们不能只写：

export default function productReducer(state = initialState, action) {
    switch(action.type) {
        case FETCH_PRODUCTS_BEGIN:
            return {
                ...state,
                loading: true,
                error: null
            };

        case FETCH_PRODUCTS_SUCCESS:
            return {
                ...state,
                loading: false,
                items: action.payload.products
            };

        case FETCH_PRODUCTS_FAILURE:
            return {
                ...state,
                loading: false,
                error: action.payload.error,
                items: []
            };

        default:
            return state;
    }
}

任何人都可以解释吗？

Answer 1

通常，您希望将其他键保留在状态之内...

如果您的州有：

{
   items:['a', 'b', 'c'],
   loading: false,
   error: null
}

，而您仅返回例如：

case FETCH_PRODUCTS_BEGIN:
    return {
        // ...state, --> Without this line
        loading: true,
        error: null
    };

您的新状态将是

{
    loading: true,
    error: null
}

您的items将丢失。

然后返回：

case FETCH_PRODUCTS_BEGIN:
    return {
        ...state,
        loading: true,
        error: null
    };

您在说

返回状态副本，但覆盖loading和error键”

Answer 2

这用于创建具有新值或更新值的新复制状态对象（如果没有此值，则需要手动指定每个状态字段）。

Object.assign可以替代

Redux Docs对于使用传播运算符有很好的解释。

为什么我们将扩展运算符用于redux

2 个答案: