Почему мы используем спред оператора в редуксе

Question

Я видел следующий код:

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;
    }
}

Но не понимаю, почему мы используем ... состояние каждый раз для каждого случая.

Разве мы не можем просто написать:

return {
                    loading: false,
                    error: action.payload.error,
                    items: action.payload.products
                };

Кто-нибудь может объяснить это?

Answer 1

Это для создания нового скопированного объекта состояния с новыми или обновленными значениями (без этого вам нужно будет вручную указать каждое поле состояния).

Object.assign может использоваться как альтернатива

Redux Docs действительно хорошо объясняет использование оператора распространения.

Answer 2

Потому что обычно вы хотите хранить другие ключи внутри вашего состояния ...

Если в вашем штате:

{
   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 "