Immutability Helpers - Reactjs

Importing

import update from 'react-addons-update'; // ES6
var update = require('react-addons-update'); // ES5 with npm

note: update là một add-on và không liên quan đến react. Tuy nhiên nó thường được sử chung với react. Overview React cho phép ta sử dụng bất kì kiểu quản lý dữ liệu nào mà ta muốn, bao gồm cả dữ liệu đột biến. Tuy nhiên nếu có thể sử dụng kiểu dữ liệu bất biến trong ứng dụng với những phần dữ liệu quan trọng thật dễ dàng thực hiện nó một cách nhanh chóng thông qua hàm shouldComponentUpdate() thì nó sẽ làm tăng tốc ứng của bạn một cách đáng kể .

The main idea Trong js thì kiểu dữ liệu string và number là bât biến. Nhưng trong một số trường hợp thì: Ví dụ:

var arr = [1,3];
var v2 = arr.push(2);

Nhiều trường hợp, ta muốn biến v2 là : [1,3,2]. Nhưng không may biến arr cũng đã thay đổi theo. Vậy ta sẽ phải làm thế nào. Ý nghĩ đơn giản đầu tiên là copy ra một thằng arr1 giống hệt thằng arr và sau đó cho

 var v2 = arr1.push(2);

Như vậy là ta đã đạt dc mục đích. Một ví dụ khác:

myData.x.y.z = 7;
// or...
myData.a.b.push(9);

ví dụ này cho ta thấy, ta không thể xác định được dữ liệu nào đã thay đổi từ khi bản sao trước đó bị thay đổi, ta lại dùng cách copy:

const newData = deepCopy(myData);
newData.x.y.z = 7;
newData.a.b.push(9);

nhìn vào đoạn copy ta có thể thấy, nếu newData có rất nhiều nhánh con thì việc copy quả là khó khăn và đôi lúc không thể thực hiện được. Chúng ta có thể chỉ cop những đối tượng mà cần thay đổi và sử dụng lại những đối tượng không thay.

const newData = extend(myData, {
  x: extend(myData.x, {
    y: extend(myData.x.y, {z: 7}),
  }),
  a: extend(myData.a, {b: myData.a.b.concat(9)})
});

Nhưng cách viết này rất dễ phát sinh bugs. update() update() cũng các các mô hình để làm đơn giản công việc copy.

import update from 'react-addons-update';

const newData = update(myData, {
  x: {y: {z: {$set: 7}}},
  a: {b: {$push: [9]}}
});

cú pháp này được lấy cảm hứng từ MongoDB's query language . Available Commands

• {$push: array} đẩy thêm phần tử vào mảng.
• {$unshift: array} chèn 1 phần tử vào đầu mảng.
• {$splice: array of arrays} loại bỏ một hoặc nhiều phần tử khỏi mảng.
• {$set: any} set lại giá trị.
• {$merge: object} trọn khóa của mảng với mục tiêu.
• {$apply: function} với giá trị cũ được thông qua của hàm và sẽ nhận giá trị mới trả về.

Examples Simple push

const initialArray = [1, 2, 3];
const newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]
//initialArray is still [1, 2, 3]

Nested collections

const collection = [1, 2, {a: [12, 17, 15]}];
const newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});
// => [1, 2, {a: [12, 13, 14, 15]}]

(Shallow) Merge

const obj = {a: 5, b: 3};
const newObj = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7}

Summary Việc sử dụng immutability là rất quan trọng, nó làm tăng tính minh bạch của dữ liêu và làm tăng tốc độ của ứng dụng. References https://facebook.github.io/react/docs/update.html