REDUX - 연결 연산자와 다른 결과를 반환하는 스프레드 연산자

Question

Redux를 사용하여 올바르게 작동하는 방법을 배우려고합니다. 스프레드 연산자를 사용하는 예제가 많이 있지만 사용 방법이 혼란 스러워요.

예를 들어, 아래 코드에서 카트에 추가 된 일부 제품을 시뮬레이션하기 위해 동일한 작업을 두 번 순서로 실행하는 아주 간단한 예가 있습니다. 첫 번째 작업은 두 제품이있는 배열을 추가하고 두 번째 작업은 두 제품을 추가합니다.

: 나는 상태에서 제품을 저장하는 CONCAT를 사용하는 경우 , 나는 세 가지 제품의 카트 배열의 예상 결과를 얻을 : 나는 예상대로 결과는 다음

"use strict" 
    import {createStore} from 'redux'; 

    // REDUCERS 
    const reducer = function(state={cart:[]}, action) { 
     switch (action.type) { 
     case "ADD_TO_CART": 

     //HERE I ADD MY NEW ARRAY TO THE EXISTING ARRAY IN TEH STATE 
     let cart = [...state.cart].concat(action.payload); 
     return {...state, cart} 

      break; 

     } 
     return state 
    } 

    // CREATE STORE 
    const store = createStore(reducer); 

    // SUBSCRIBE 
    store.subscribe(function() { 
     console.log("current state is", store.getState()); 

    }) 

    // ACTIONS 
    store.dispatch({ 
     type: "ADD_TO_CART", 
     payload:[ { 
     productId: 1, 
     name: "Product A", 
     price: 33.33 
     }, 
     { 
     productId: 2, 
     name: "Product B", 
     price: 15.00 
     }] 
    }) 

    store.dispatch({ 
     type: "ADD_TO_CART", 
     payload: 
     [{ 
     productId: 3, 
     name: "Product C", 
     price: 40.00 
     }] 
    }) 

입니다 대신 다음과 같이 스프레드 연산자를 사용하면 Redux가 첫 번째 실행 된 동작에서 추가 된 두 개의 배열과 세 번째 배열/제품을 포함하는 두 개의 객체를 포함하는 두 개의 객체를 만드는 이상한 결과를 얻습니다.

"엄격하게 사용" 가져 오기 {createStore}에서 'redux';

// REDUCERS 
    const reducer = function(state={cart:[]}, action) { 
     switch (action.type) { 
     case "ADD_TO_CART": 

     //HERE I ADD MY NEW ARRAY TO THE EXISTING ARRAY IN TEH STATE 
     return {...state, cart:[...state.cart, action.payload]} 

      break; 

     } 
     return state 
    } 

    // CREATE STORE 
    const store = createStore(reducer); 

    // SUBSCRIBE 
    store.subscribe(function() { 
     console.log("current state is", store.getState()); 

    }) 

    // ACTIONS 
    store.dispatch({ 
     type: "ADD_TO_CART", 
     payload:[ { 
     productId: 1, 
     name: "Product A", 
     price: 33.33 
     }, 
     { 
     productId: 2, 
     name: "Product B", 
     price: 15.00 
     }] 
    }) 

    store.dispatch({ 
     type: "ADD_TO_CART", 
     payload: 
     [{ 
     productId: 3, 
     name: "Product C", 
     price: 40.00 
     }] 
    }) 

이 크롬 콘솔 결과 :

Answer 1

페이로드는, 배열 때문에 확산 예에서는 작동하지 않는다 :

payload:[ { 
    productId: 1, 
    name: "Product A", 
    price: 33.33 
    }, 
    { 
    productId: 2, 
    name: "Product B", 
    price: 15.00 
    }] 
}) 

용액을이고 페이로드를 퍼 뜨리십시오 :

state = {...state, cart: [...state.cart, ...action.payload] }; 

---

예 :

let state = { cart: [{ id: 1 }] }; 
 

 
const action = { payload: [{ id: 2}, { id: 3}] }; 
 

 

 

 
state = {...state, cart: [...state.cart, ...action.payload] }; 
 
      
 
console.log(state);

---

참고 : state.cart가 배열이기 때문에 당신이 Array#concat를 사용하는 경우, 당신은이 작업을 단순화 할 수 있습니다 :

[...state.cart].concat(action.payload); 

스프레드 및 래핑 배열 제거 :