React - Reducer - Merge object
TIL
763
@100daysTIL
72
White

Minh-Trung Nguyễn viết ngày 14/03/2018

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Minh-Trung Nguyễn

63 bài viết.
121 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
53 16
Đăng lại một bài đã viết từ cách đây mấy tháng. Chủ đề này đã có không ít, nhưng chẳng hiểu sao lượng bài tự viết của dân lập trình người Việt ta v...
Minh-Trung Nguyễn viết hơn 2 năm trước
53 16
White
28 6
Ghi chú: Tiêu đề hoàn toàn mang tính câu view. Bài copy từ blog của tác giả :) Tại sao lại có bài viết này? Một ngày đẹp giời tôi cần kiểm t...
Minh-Trung Nguyễn viết gần 3 năm trước
28 6
White
17 4
Về bước tìm và xử lý dữ liệu của Việt Nam phục vụ Data Visualization nền web Làm việc với D3js được nửa năm, một trong những điều bận lòng là chưa...
Minh-Trung Nguyễn viết hơn 2 năm trước
17 4
Bài viết liên quan
White
0 4
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết hơn 2 năm trước
0 4
White
4 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết hơn 1 năm trước
4 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
63 bài viết.
121 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!