Làm cách nào để chuyển đổi thuộc tính trong bộ giảm tốc?

Question

tôi đã xây dựng một ứng dụng giỏ hàng với giảm này trong reactjs/Redux:

const initialState = { 
    items: [], 
    cartOpen: false, 
    total: 0 
} 

const Cart = (state = initialState, action) => { 
    switch (action.type) { 
     case 'ADD_TO_CART': 
      let newstate = [...state, action.payload]; 
      var newTotal = 0; 
      newstate.forEach(it => { 
       newTotal += it.item.price; 
      }); 
      newstate.total = newTotal; 
      newstate.cartOpen =true 
      return newstate; 

     case 'TOGGLE_CART': 
      debugger; 
      return !state.cartOpen; 

     default: 
      return state 
    } 
} 

export default Cart; 

Tôi cố gắng để thiết lập trạng thái cho các giỏ tức là mở nhưng khi tôi kiểm tra các bản ghi vào giỏ bất động sản được cập nhật và không phải là cartOpen bất động sản?

Answer 1

Redux giả định rằng bạn không bao giờ đột biến các đối tượng nó mang lại cho bạn trong giảm tốc . Mỗi lần duy nhất, bạn phải trả về đối tượng trạng thái mới. Ngay cả khi bạn không sử dụng thư viện như Immutable, bạn cần hoàn toàn tránh đột biến.

case 'TOGGLE_CART': 
    return !state.cartOpen; 

Làm ^^ này là đột biến trạng thái của bạn (làm hư tượng trạng thái của bạn). Khi bạn không đảm bảo bất biến, Redux mất khả năng dự đoán và hiệu quả của nó.

Để đạt được trạng thái bất biến, chúng tôi có thể sử dụng vanilla Object.assign hoặc phương án thay thế thanh lịch hơn object spread syntax.

case 'TOGGLE_CART': 
    return { 
     ...state, 
     cartOpen: !state.cartOpen 
    } 

Answer 2

Trình giảm tốc của bạn phải luôn trả lại toàn bộ trạng thái của ứng dụng mà nó chịu trách nhiệm. Đối với TOGGLE_CART, bạn chỉ trả lại giá trị boolean cho openCart.

Thay vào đó, tạo một bản sao của đối tượng trạng thái trước đó và chỉ cập nhật các tài sản duy nhất bạn muốn thay đổi:

case 'TOGGLE_CART': 
    return Object.assign({}, state, { 
     cartOpen: !state.cartOpen 
    });