ตัวลดที่ดีขึ้นด้วย Immer

ในฐานะนักพัฒนา React คุณควรคุ้นเคยกับหลักการที่ว่า รัฐไม่ควรกลายพันธุ์โดยตรงอยู่แล้ว คุณอาจสงสัยว่านั่นหมายถึงอะไร (พวกเราส่วนใหญ่มีความสับสนนั้นเมื่อเราเริ่มต้น)

บทช่วยสอนนี้จะใช้ความยุติธรรมกับสิ่งนั้น: คุณจะเข้าใจว่าสถานะที่ไม่เปลี่ยนรูปคืออะไรและจำเป็นสำหรับมัน คุณยังจะได้เรียนรู้วิธีการใช้ Immer เพื่อทำงานกับสถานะที่ไม่เปลี่ยนรูปและประโยชน์ของการใช้มัน คุณสามารถค้นหารหัสในบทความนี้ใน repo Github นี้

ความไม่เปลี่ยนรูปใน JavaScript และเหตุใดจึงสำคัญ

Immer.js เป็นไลบรารี JavaScript ขนาดเล็กที่เขียนขึ้นโดย Michel Weststrate ซึ่งภารกิจดังกล่าวคืออนุญาตให้คุณ "ทำงานกับสถานะที่ไม่เปลี่ยนรูปได้ในวิธีที่สะดวกกว่า"

แต่ก่อนที่จะดำดิ่งสู่ Immer เรามาทบทวนอย่างรวดเร็วเกี่ยวกับความไม่เปลี่ยนรูปใน JavaScript และเหตุใดจึงสำคัญในแอปพลิเคชัน React

มาตรฐาน ECMAScript (aka JavaScript) ล่าสุดกำหนดประเภทข้อมูลในตัวเก้าประเภท จากเก้าประเภทเหล่านี้ มีหกประเภทที่เรียกว่าค่า/ประเภท primitive พื้นฐานทั้งหกนี้ไม่มีการ undefined number string boolean bigint และ symbol การตรวจสอบอย่างง่ายด้วยตัวดำเนินการ typeof ของ JavaScript จะเปิดเผยประเภทของประเภทข้อมูลเหล่านี้

 console.log(typeof 5) // number console.log(typeof 'name') // string console.log(typeof (1 < 2)) // boolean console.log(typeof undefined) // undefined console.log(typeof Symbol('js')) // symbol console.log(typeof BigInt(900719925474)) // bigint

primitive คือค่าที่ไม่ใช่อ็อบเจกต์และไม่มีเมธอด สิ่งสำคัญที่สุดสำหรับการอภิปรายในปัจจุบันของเราคือข้อเท็จจริงที่ว่าค่าดั้งเดิมไม่สามารถเปลี่ยนแปลงได้เมื่อสร้างขึ้นแล้ว ดังนั้น ดึกดำบรรพ์จึงกล่าวกันว่า immutable

อีกสามประเภทที่เหลือคือ null object และ function นอกจากนี้เรายังสามารถตรวจสอบประเภทได้โดยใช้ประเภทของ typeof ดำเนินการ

 console.log(typeof null) // object console.log(typeof [0, 1]) // object console.log(typeof {name: 'name'}) // object const f = () => ({}) console.log(typeof f) // function

ประเภทเหล่านี้ mutable ได้ ซึ่งหมายความว่าสามารถเปลี่ยนแปลงค่าได้ตลอดเวลาหลังจากที่สร้างขึ้น

คุณอาจสงสัยว่าทำไมฉันถึงมีอาร์เรย์ [0, 1] อยู่ที่นั่น ใน JavaScriptland อาร์เรย์เป็นเพียงวัตถุประเภทพิเศษ ในกรณีที่คุณยังสงสัยเกี่ยวกับ null และความแตกต่างจาก undefined อย่างไร undefined หมายความว่าเราไม่ได้ตั้งค่าตัวแปรในขณะที่ null เป็นกรณีพิเศษสำหรับอ็อบเจกต์ หากคุณรู้ว่าบางสิ่งควรเป็นวัตถุ แต่ไม่มีวัตถุอยู่ คุณเพียงแค่ส่งคืน null

เพื่อแสดงตัวอย่างง่ายๆ ให้ลองเรียกใช้โค้ดด้านล่างในคอนโซลเบราว์เซอร์ของคุณ

 console.log('aeiou'.match(/[x]/gi)) // null console.log('xyzabc'.match(/[x]/gi)) // [ 'x' ]

String.prototype.match ควรส่งคืนอาร์เรย์ ซึ่งเป็นประเภท object เมื่อไม่พบวัตถุดังกล่าว จะส่งคืน null การส่งคืนที่ undefined ก็ไม่สมเหตุสมผลเช่นกัน

แค่นั้นพอ กลับมาพูดถึงความไม่เปลี่ยนรูปกัน

ตามเอกสาร MDN:

“ทุกประเภทยกเว้นวัตถุกำหนดค่าที่ไม่เปลี่ยนรูป (นั่นคือค่าที่ไม่สามารถเปลี่ยนแปลงได้)”

คำสั่งนี้มีฟังก์ชันเนื่องจากเป็นอ็อบเจ็กต์ JavaScript ชนิดพิเศษ ดูคำจำกัดความของฟังก์ชันที่นี่

มาดูกันว่าในทางปฏิบัติประเภทข้อมูลที่ไม่แน่นอนและไม่เปลี่ยนแปลงนั้นมีความหมายอย่างไร ลองเรียกใช้โค้ดด้านล่างในคอนโซลเบราว์เซอร์ของคุณ

 let a = 5; let b = a console.log(`a: ${a}; b: ${b}`) // a: 5; b: 5 b = 7 console.log(`a: ${a}; b: ${b}`) // a: 5; b: 7

ผลลัพธ์ของเราแสดงให้เห็นว่าแม้ว่า b จะ "ได้มาจาก a " การเปลี่ยนค่าของ b จะไม่ส่งผลต่อค่าของ a สิ่งนี้เกิดขึ้นจากข้อเท็จจริงที่ว่าเมื่อกลไกจัดการ JavaScript รันคำสั่ง b = a จะสร้างตำแหน่งหน่วยความจำใหม่ที่แยกจากกัน ใส่ 5 ไว้ที่นั่น และจุด b ที่ตำแหน่งนั้น

แล้ววัตถุล่ะ? พิจารณารหัสด้านล่าง

 let c = { name: 'some name'} let d = c; console.log(`c: ${JSON.stringify(c)}; d: ${JSON.stringify(d)}`) // {"name":"some name"}; d: {"name":"some name"} d.name = 'new name' console.log(`c: ${JSON.stringify(c)}; d: ${JSON.stringify(d)}`) // {"name":"new name"}; d: {"name":"new name"}

เราจะเห็นว่าการเปลี่ยนคุณสมบัติชื่อผ่านตัวแปร d จะเปลี่ยนใน c ด้วย สิ่งนี้เกิดขึ้นจากข้อเท็จจริงที่ว่าเมื่อเอ็นจิ้น JavaScript รันคำสั่ง c = { name: 'some name ' } เอ็นจิ้น JavaScript จะสร้างช่องว่างในหน่วยความจำ วางอ็อบเจกต์ไว้ข้างใน และชี้ไปที่ c จากนั้น เมื่อรันคำสั่ง d = c น JavaScript จะชี้ d ไปยังตำแหน่งเดียวกัน มันไม่ได้สร้างตำแหน่งหน่วยความจำใหม่ ดังนั้นการเปลี่ยนแปลงใดๆ กับรายการใน d จึงเป็นการดำเนินการกับรายการใน c โดยปริยาย โดยไม่ต้องใช้ความพยายามมาก เราสามารถเห็นได้ว่าทำไมสิ่งนี้ถึงเป็นปัญหาในการสร้าง

ลองนึกภาพว่าคุณกำลังพัฒนาแอปพลิเคชัน React และบางแห่งที่คุณต้องการแสดงชื่อผู้ใช้เป็น some name โดยอ่านจากตัวแปร c แต่ที่อื่นคุณได้แนะนำจุดบกพร่องในโค้ดของคุณโดยจัดการอ็อบเจกต์ d ซึ่งจะส่งผลให้ชื่อผู้ใช้ปรากฏเป็น new name ถ้า c และ d เป็นพื้นฐาน เราจะไม่มีปัญหานั้น แต่พื้นฐานทั่วไปนั้นง่ายเกินไปสำหรับประเภทของสถานะที่แอปพลิเคชัน React ทั่วไปต้องรักษาไว้

นี่เป็นเหตุผลหลักว่าทำไมการรักษาสถานะที่ไม่เปลี่ยนรูปในแอปพลิเคชันของคุณจึงเป็นสิ่งสำคัญ ฉันแนะนำให้คุณตรวจสอบข้อควรพิจารณาอื่นๆ อีกสองสามข้อโดยอ่านส่วนสั้นๆ นี้จาก Immutable.js README: กรณีของการไม่เปลี่ยนรูป

เมื่อเข้าใจแล้วว่าทำไมเราถึงต้องการความไม่เปลี่ยนรูปในแอปพลิเคชัน React ตอนนี้เรามาดูกันว่า Immer จัดการกับปัญหาด้วยฟังก์ชันการ produce ได้อย่างไร

ฟังก์ชั่นการ produce ของ Immer

API หลักของ Immer นั้นเล็กมาก และฟังก์ชันหลักที่คุณจะใช้งานคือฟังก์ชันการ produce produce เพียงใช้สถานะเริ่มต้นและการโทรกลับที่กำหนดว่าสถานะควรจะกลายพันธุ์อย่างไร การเรียกกลับเองจะได้รับสำเนาของสถานะที่ทำการปรับปรุงทั้งหมด (ที่เหมือนกัน แต่ยังคงเป็นสำเนา) ในที่สุดก็ produce สถานะใหม่ที่ไม่เปลี่ยนรูปพร้อมกับการเปลี่ยนแปลงทั้งหมดที่ใช้

รูปแบบทั่วไปสำหรับการอัปเดตสถานะประเภทนี้คือ:

 // produce signature produce(state, callback) => nextState

เรามาดูกันว่ามันทำงานอย่างไรในทางปฏิบัติ

 import produce from 'immer' const initState = { pets: ['dog', 'cat'], packages: [ { name: 'react', installed: true }, { name: 'redux', installed: true }, ], } // to add a new package const newPackage = { name: 'immer', installed: false } const nextState = produce(initState, draft => { draft.packages.push(newPackage) })

ในโค้ดด้านบนนี้ เราเพียงแค่ส่งผ่านสถานะเริ่มต้นและการเรียกกลับที่ระบุว่าเราต้องการให้การกลายพันธุ์เกิดขึ้นอย่างไร มันง่ายอย่างนั้น เราไม่จำเป็นต้องสัมผัสส่วนอื่นของรัฐ มันปล่อย initState ไม่ถูกแตะต้อง และแบ่งปันโครงสร้างส่วนต่างๆ ของรัฐที่เราไม่ได้สัมผัสระหว่างสถานะเริ่มต้นและสถานะใหม่ ส่วนหนึ่งในรัฐของเราคืออาร์เรย์ pets การ produce d nextState เป็นแผนผังสถานะที่ไม่เปลี่ยนรูปซึ่งมีการเปลี่ยนแปลงที่เราได้ทำรวมถึงส่วนที่เราไม่ได้แก้ไข

ด้วยความรู้ที่เรียบง่าย แต่มีประโยชน์นี้ มาดูกันว่าการ produce สามารถช่วยให้เราลดความซับซ้อนของ React ของเราได้อย่างไร

การเขียนตัวลดขนาดด้วย Immer

สมมติว่าเรามีวัตถุสถานะที่กำหนดไว้ด้านล่าง

 const initState = { pets: ['dog', 'cat'], packages: [ { name: 'react', installed: true }, { name: 'redux', installed: true }, ], };

และเราต้องการเพิ่มวัตถุใหม่และในขั้นตอนต่อไป ให้ตั้งค่าคีย์ที่ installed true

 const newPackage = { name: 'immer', installed: false };

หากเราทำสิ่งนี้ตามปกติกับวัตถุ JavaScript และไวยากรณ์การแพร่กระจายอาร์เรย์ ตัวลดสถานะของเราอาจมีลักษณะดังนี้

 const updateReducer = (state = initState, action) => { switch (action.type) { case 'ADD_PACKAGE': return { ...state, packages: [...state.packages, action.package], }; case 'UPDATE_INSTALLED': return { ...state, packages: state.packages.map(pack => pack.name === action.name ? { ...pack, installed: action.installed } : pack ), }; default: return state; } };

เราจะเห็นได้ว่านี่เป็นรายละเอียดที่ไม่จำเป็นและมีแนวโน้มที่จะผิดพลาดสำหรับวัตถุสถานะที่ค่อนข้างง่ายนี้ เรายังต้องสัมผัสทุกส่วนของรัฐซึ่งไม่จำเป็น เรามาดูกันว่าเราจะทำให้สิ่งนี้ง่ายขึ้นด้วย Immer ได้อย่างไร

 const updateReducerWithProduce = (state = initState, action) => produce(state, draft => { switch (action.type) { case 'ADD_PACKAGE': draft.packages.push(action.package); break; case 'UPDATE_INSTALLED': { const package = draft.packages.filter(p => p.name === action.name)[0]; if (package) package.installed = action.installed; break; } default: break; } });

 //curried produce signature produce(callback) => (state) => nextState

 const curriedProduce = produce((draft, action) => { switch (action.type) { case 'ADD_PACKAGE': draft.packages.push(action.package); break; case 'SET_INSTALLED': { const package = draft.packages.filter(p => p.name === action.name)[0]; if (package) package.installed = action.installed; break; } default: break; } });

 // add a new package to the starting state const nextState = curriedProduce(initState, { type: 'ADD_PACKAGE', package: newPackage, }); // update an item in the recently produced state const nextState2 = curriedProduce(nextState, { type: 'SET_INSTALLED', name: 'immer', installed: true, });

 yarn add immer use-immer

 import React from "react"; import { useImmer } from "use-immer"; const initState = {} const [ data, updateData ] = useImmer(initState)

 // make changes to data updateData(draft => { // modify the draft as much as you want. })

 import React from "react"; import { useImmerReducer } from "use-immer"; const initState = {} const reducer = (draft, action) => { switch(action.type) { default: break; } } const [data, dataDispatch] = useImmerReducer(reducer, initState);