React - Reducer - Merge object



  • React - Reducer - Merge object

    Day 31:

    Đoạn Redux giải thích về hàm reducer todoApp() hay quá. Mục đích của hàm todoApp() là:

    • nhận tham số đầu vào bao gồm object state hiện tại và object action.
    • trả về object state mới nhưng không làm thay đổi object state hiện tại. Object state mới là gộp của object state hiện tại và object action.
    function todoApp(state = initialState, action) {
      switch (action.type) {
        case SET_VISIBILITY_FILTER:
          return Object.assign({}, state, {
            visibilityFilter: action.filter
          })
        default:
          return state
      }
    }
    

    Với đoạn code trên, trong phần return Object.assign() được truyền vào:

    # Tham số Gọi tắt là Ứng với
    1 { } object1 object state mới
    2 state object2 object state hiện tại
    3 {visibilityFilter: action.filter} object3 object action

    Nếu muốn đơn giản tạo ra object state mới là gộp (merge) của object state hiện tại và object action, thì chỉ cần làm đơn giản là:

    return Object.assign(state, {visibilityFilter: action.filter})
    
    // chính là return Object.assign(object2, object3)
    

    tuy nhiên cách này KHÔNG ĐẠT bởi nó làm thay đổi object statehiện tại (chính là object2).

    Tra để biết. Thử nhé:

    // khai báo 3 objects:
    let obj1 = {};
    let obj2 = {b: 1};
    let obj3 = {c: 2};
    
    let XX = Object.assign(obj1, obj2, obj3);
    console.log(XX) // trả về {b: 1, c: 2}
    console.log(obj1) // trả về {b: 1, c: 2}
    
    let YY = Object.assign(obj2, obj3);
    console.log(YY) // trả về {b: 1, c: 2}
    console.log(obj2) // trả về  {b: 1, c: 2}
    

    Như vậy tuy 2 objects trả về XX và YY là giống nhau, thì trường hợp đầu, obj2 không hề bị thay đổi giá trị (hay tiếng Anh gọi là không bị mutated).

    Đấy là lý do tại sao người ta phải dùng cách trông có vẻ dài dòng, đó là:

    return Object.assign({}, state, {visibilityFilter: action.filter})
    
    // ứng với Object.assign(object1, object2, object3)
    

    Ngoài ra có thể dùng ES6 Object Spread Operator để viết cho ngắn gọn đoạn trên. Phần return dưới đây là tương đương đoạn trên:

    return { ...state,  visibilityFilter: action.filter }
    

    ngminhtrung 13-03-2018

    Nguồn: Kipalog


Hãy đăng nhập để trả lời
 

Có vẻ như bạn đã mất kết nối tới LaptrinhX, vui lòng đợi một lúc để chúng tôi thử kết nối lại.