วิธีใช้บริบทการตอบสนองสำหรับการจัดการสถานะใน Next.js 13
Next.js นำเสนอแนวทางการจัดการสถานะหลายวิธี แม้ว่าวิธีการเหล่านี้บางวิธีจำเป็นต้องติดตั้งไลบรารีใหม่ แต่ Context API ของ React€™ นั้นมีอยู่แล้วภายใน ดังนั้นจึงเป็นวิธีที่ยอดเยี่ยมในการลดการพึ่งพาภายนอก
React Context ช่วยให้สามารถส่งข้อมูลได้อย่างง่ายดายตลอดลำดับชั้นส่วนประกอบ โดยไม่จำเป็นต้องเจาะเสาที่ล่วงล้ำ สิ่งนี้พิสูจน์ให้เห็นถึงข้อได้เปรียบโดยเฉพาะอย่างยิ่งในการรักษาข้อมูลที่เกี่ยวข้องทั่วโลก เช่น สถานะการเข้าสู่ระบบของผู้ใช้ที่ได้รับการตรวจสอบสิทธิ์ในปัจจุบันและธีมที่พวกเขาชื่นชอบ
ทำความเข้าใจ React Context API
เพื่อที่จะเจาะลึกถึงการนำโค้ดไปใช้อย่างมีประสิทธิภาพ จำเป็นอย่างยิ่งที่จะต้องมีความเข้าใจอย่างครอบคลุมเกี่ยวกับ React Context API และวัตถุประสงค์ในการจัดการกับความท้าทายที่เฉพาะเจาะจง
การใช้อุปกรณ์ประกอบฉากช่วยให้สามารถส่งข้อมูลระหว่างองค์ประกอบที่เชื่อมต่อถึงกันได้อย่างราบรื่น ช่วยอำนวยความสะดวกในการถ่ายโอนข้อมูลจากส่วนประกอบที่เหนือกว่าไปยังผู้ใต้บังคับบัญชาผ่านโครงสร้างแบบลำดับชั้น
วิธีการนี้พิสูจน์ให้เห็นว่ามีข้อได้เปรียบเนื่องจากแสดงให้เห็นส่วนประกอบเฉพาะที่อาศัยข้อมูลเฉพาะอย่างชัดเจน ควบคู่ไปกับความก้าวหน้าของข้อมูลดังกล่าวตลอดโครงสร้างลำดับชั้นของส่วนประกอบต่างๆ
อย่างไรก็ตาม ปัญหาอาจเกิดขึ้นเมื่อส่วนประกอบที่มีการวางซ้อนที่ซับซ้อนต้องใช้อุปกรณ์ประกอบฉากที่เหมือนกัน สถานการณ์ดังกล่าวอาจทำให้เกิดภาวะแทรกซ้อนและอาจถึงจุดสุดยอดด้วยโค้ดที่ซับซ้อนซึ่งยากต่อการรักษาไว้ ท่ามกลางข้อกังวลเหล่านี้ เช่นเดียวกับข้อกังวลอื่นๆ เกี่ยวข้องกับข้อเสียที่เกี่ยวข้องกับการเจาะเสา
React Context แก้ไขปัญหาการเข้าถึงข้อมูลทั่วโลกโดยนำเสนอแนวทางที่เป็นหนึ่งเดียวสำหรับการสร้างและการใช้ข้อมูลที่ต้องพร้อมใช้งานในส่วนประกอบต่างๆ ภายในแอปพลิเคชัน
การใช้ที่เก็บข้อมูลที่มีโครงสร้างช่วยให้การเรียกค้นและการจัดการข้อมูลโดยส่วนประกอบต่างๆ ของระบบเป็นไปอย่างราบรื่น ประสิทธิภาพขององค์กรจึงได้รับการปรับปรุง เพื่อให้มั่นใจถึงฟังก์ชันการทำงานที่เหมาะสมที่สุดภายในเครือข่ายที่ซับซ้อน
ซอร์สโค้ดสำหรับโปรเจ็กต์นี้โฮสต์อยู่บนพื้นที่เก็บข้อมูล GitHub ของเรา ซึ่งผู้มีส่วนได้เสียสามารถเข้าถึงได้
เริ่มต้นใช้งานการจัดการสถานะใน Next.js 13 โดยใช้ React Context API
ส่วนประกอบเซิร์ฟเวอร์ Next.js ช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันที่ผสานรวมการตอบสนองของแพลตฟอร์มฝั่งไคลเอ็นต์เข้ากับประสิทธิภาพที่เพิ่มขึ้นที่เกี่ยวข้องกับเนื้อหาที่เรนเดอร์จากเซิร์ฟเวอร์ ดังนั้นจึงมอบประสบการณ์ผู้ใช้ที่เหนือกว่าในขณะที่เพิ่มประสิทธิภาพการทำงาน
Next.js เวอร์ชัน 13 ได้รวม Server Components ไว้ในไดเร็กทอรีของแอปพลิเคชันตามค่าเริ่มต้น ซึ่งขณะนี้ถือว่ามีเสถียรภาพแล้ว อย่างไรก็ตาม ควรสังเกตว่าเนื่องจากส่วนประกอบทั้งหมดแสดงผลบนฝั่งเซิร์ฟเวอร์ จึงอาจเกิดปัญหาขึ้นเมื่อพยายามรวมไลบรารีฝั่งไคลเอ็นต์หรือ API เช่น React Context
วิธีแก้ปัญหาที่มีประสิทธิภาพวิธีหนึ่งในการป้องกันปัญหานี้คือการใช้แฟล็ก"ไคลเอนต์"ซึ่งสามารถนำไปใช้กับไฟล์ JavaScript เพื่อรันโค้ดฝั่งไคลเอ็นต์
ในการเริ่มต้นกระบวนการ คุณสามารถสร้างสภาพแวดล้อมการพัฒนา Next.js 13 บนเครื่องของคุณโดยใช้ขั้นตอนต่อไปนี้ภายในเทอร์มินัลของคุณ:
npx create-next-app@latest next-context-api
เมื่อต้องการเข้าถึงไดเร็กทอรีของโครงการที่สร้างขึ้นใหม่ในลักษณะที่ซับซ้อน ให้ทำตามขั้นตอนเหล่านี้:1. เมื่อคุณสร้างโปรเจ็กต์โดยใช้วิธีการที่เหมาะสมแล้ว ให้ดำเนินการค้นหาตำแหน่งทางกายภาพบนระบบไฟล์ของคุณโดยการนำทางผ่านโครงสร้างลำดับชั้นของไดเร็กทอรีและไฟล์จนกว่าคุณจะไปถึงโฟลเดอร์ที่กำหนดซึ่งมีส่วนประกอบทั้งหมดที่เกี่ยวข้องกับโปรเจ็กต์ กระบวนการนี้อาจเกี่ยวข้องกับการใช้อินเทอร์เฟซบรรทัดคำสั่งหรืออินเทอร์เฟซผู้ใช้แบบกราฟิก ขึ้นอยู่กับระบบปฏิบัติการและการกำหนดลักษณะของคุณ
cd next-context-api
จากนั้นเริ่มเซิร์ฟเวอร์การพัฒนา:
npm run dev
เมื่อสร้างโครงสร้างโปรเจ็กต์ Next.js พื้นฐานแล้ว เราอาจสร้างแอปพลิเคชันตัวจัดการงานพื้นฐานโดยใช้ประโยชน์จาก React Context API เป็นวิธีหลักในการกำกับดูแลสถานะ
สร้างผู้ให้บริการบริบท
ฟังก์ชันตัวให้บริการบริบททำหน้าที่เป็นแหล่งข้อมูลหลักที่ส่วนประกอบต่างๆ ได้รับข้อมูลระดับโลกที่จำเป็น ช่วยให้สามารถโต้ตอบกับสภาพแวดล้อมได้อย่างมีประสิทธิภาพ
โปรดสร้างไฟล์ใหม่ชื่อ src/context/Todo.context.js
ในไดเร็กทอรีโปรเจ็กต์ของคุณ และวางโค้ดต่อไปนี้ลงในไฟล์:javascriptimport { DefineContext } จาก’vuex’;export defaultdefineContext({id:’todo’,state: ()=> ({todos: [],selectedTodo: null,isAllChecked: false,showForm: false,}),การกลายพันธุ์: {setTodos(state, value) {state.todos=value;},addTodo(state, todo ) {if (!state.todos.length) {return;}const updatedTodos=[…state.todos
"use client"
import React, { createContext, useReducer } from "react";
const initialState = {
todos: [],
};
const reducer = (state, action) => {
switch (action.type) {
case "ADD_TODO":
return { ...state, todos: [...state.todos, action.payload] };
case "DELETE_TODO":
return { ...state, todos: state.todos.filter((todo, index) =>
index !== action.payload) };
case "EDIT_TODO":
const updatedTodos = state.todos.map((todo, index) =>
index === action.payload.index ? action.payload.newTodo : todo);
return { ...state, todos: updatedTodos };
default:
return state;
}
};
export const TodoContext = createContext({
state: initialState,
dispatch: () => null,
});
export const TodoContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<TodoContext.Provider value={{ state, dispatch }}>
{children}
</TodoContext.Provider>
);
};
การกำหนดค่าปัจจุบันสร้างกรอบงานตามบริบทสำหรับ React เรียกว่า “TodoContext” ซึ่งเริ่มต้นด้วยรายการงานว่างเป็นสถานะเริ่มต้นสำหรับแอปพลิเคชัน
นอกเหนือจากการสร้างสถานะเริ่มต้นแล้ว การกำหนดค่าบริบทนี้ยังรวมฟังก์ชันตัวลดซึ่งจะสรุปการดำเนินการหลายประเภท การใช้งานประเภทการกระทำเหล่านี้จะทำให้เกิดการเปลี่ยนแปลงในสถานะของบริบทตามการดำเนินการที่ดำเนินการ ตัวอย่างเช่น การกระทำเหล่านี้อาจเกี่ยวข้องกับการแทรก การเอาออก หรือการปรับเปลี่ยนรายการสิ่งที่ต้องทำภายในบริบท
เสา ค่า
ซึ่งแสดงถึงสถานะเริ่มต้นของบริบท และเสา ตัวลด
ซึ่งกำหนดฟังก์ชันการดำเนินการลด
เมื่อนำเข้า TodoContext โดยองค์ประกอบที่กำหนด สภาวะปัจจุบันของบริบทดังกล่าวจะสามารถเรียกคืนได้ พร้อมด้วยความสามารถในการเผยแพร่สัญญาณสำหรับการแก้ไขการจัดการ
เพิ่มผู้ให้บริการบริบทในแอป Next.js
เพื่อให้ผู้ให้บริการบริบทแสดงผลที่ระดับบนสุดของแอปพลิเคชัน Next.js ของคุณ เพื่อให้แน่ใจว่าส่วนประกอบฝั่งไคลเอ็นต์ทั้งหมดสามารถเข้าถึงได้ จำเป็นต้องรวมบริบทไว้ในองค์ประกอบเค้าโครงรากของแอปพลิเคชัน
เพื่อให้งานนี้สำเร็จ โปรดเข้าถึงไฟล์ “src/app/layout.js” และใส่โหนดลูกไว้ในเทมเพลต HTML โดยใช้ตัวให้บริการบริบทดังที่แสดงด้านล่าง:
import './globals.css';
import { TodoContextProvider } from "@/context/Todo.context";
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children
}) {
return (
<html lang="en">
<body>
<TodoContextProvider>{children}</TodoContextProvider>
</body>
</html>
);
}
สร้างองค์ประกอบสิ่งที่ต้องทำ
ในการสร้างไฟล์ใหม่ภายในโครงสร้างไดเร็กทอรีที่ระบุ โปรดปฏิบัติตามขั้นตอนเหล่านี้:1. เปิดตัวแก้ไขข้อความที่คุณต้องการหรือสภาพแวดล้อมการพัฒนาแบบรวม (IDE)2. นำทางไปยังโฟลเดอร์ “src” ของโครงการของคุณ3. ภายในโฟลเดอร์ “src” ให้ค้นหาและเลือกโฟลเดอร์ย่อย “components”4. คลิกที่ปุ่ม"ไฟล์ใหม่"ในโปรแกรมแก้ไขข้อความหรือ IDE เพื่อสร้างเอกสารเปล่าใหม่5. บันทึกไฟล์ที่สร้างขึ้นใหม่ด้วยชื่อ “Todo.js” ซึ่งควรทำภายในโฟลเดอร์ย่อย"components"และโฟลเดอร์"src"โดยรวม6. เมื่อบันทึกไฟล์แล้ว คุณสามารถคัดลอกและวางข้อมูลโค้ดที่ให้มาลงในไฟล์ “Todo.js” ใหม่ได้ ตรวจสอบให้แน่ใจว่ามีการเยื้อง
รวมคำสั่งการนำเข้าที่จำเป็น รวมถึงแฟล็ก use client
และกำหนดส่วนประกอบนี้เป็นส่วนประกอบฝั่งไคลเอ็นต์โดยใช้แฟล็กที่เหมาะสมในข้อมูลโค้ดด้านล่าง:javascriptimport { use client } จาก’next/client’;const MyComponent=()=> {const [data, setData]=useState([]);//ใช้การตั้งค่าสถานะไคลเอ็นต์ที่นี่…return ( {/* JSX ของส่วนประกอบของคุณอยู่ที่นี่ */} );};ส่งออก MyComponent เริ่มต้น;
"use client"
import { TodoContext } from "@/context/Todo.context";
import React, { useContext, useState } from "react";
ต่อไป เราจะอธิบายลักษณะการทำงานของแอปพลิเคชันของเราโดยการระบุส่วนประกอบ HTML ที่จะแสดงผลภายในเว็บเบราว์เซอร์โดยใช้ JavaScript Extensible Markup Language (JSX)
export default function Todo() {
return (
<div style={{ marginBottom: "4rem", textAlign: "center" }}>
<h2>Todos</h2>
<input
type="text"
value={todoText}
onChange={(e) => setTodoText(e.target.value)}
style={{ marginBottom: 16}}
placeholder="Enter a todo"
/>
<button onClick={handleAddTodo}>Add Todo</button>
<ul>
{state.todos.map((todo, index) => (
<li key={index}>
{index === editingIndex ? (
<>
<input
type="text"
value={editedTodo}
onChange={(e) => setEditedTodo(e.target.value)}
/>
<button
style={{ marginRight: 16}}
onClick={() => handleEditTodo(index, editedTodo)}
>
Save
</button>
</>
) : (
<>
{todo}
<button
style={{ marginRight: 16}}
onClick={() => setEditingIndex(index)}
>Edit</button>
<button
onClick={() => handleDeleteTodo(index)}
>Delete</button>
</>
)}
</li>
))}
</ul>
</div>
);
}
ส่วนประกอบการทำงานนี้ครอบคลุมองค์ประกอบแบบโต้ตอบสำหรับการเพิ่ม การแก้ไข และการลบงานภายในรายการ ส่วนประกอบเหล่านี้สร้างขึ้นโดยใช้ความสามารถในการเรนเดอร์แบบมีเงื่อนไขของ React ซึ่งแสดงปุ่มแก้ไขและลบโดยขึ้นอยู่กับค่าปัจจุบันของตัวแปรการจัดทำดัชนี
สุดท้ายนี้ เราจะต้องระบุตัวแปรสถานะที่จำเป็น และใช้ฟังก์ชันตัวจัดการที่เหมาะสมสำหรับการดำเนินการแต่ละประเภทภายในเนื้อหาของส่วนประกอบการทำงาน เพื่อให้บรรลุผลนี้ ให้รวมบรรทัดโค้ดต่อไปนี้
const { state, dispatch } = useContext(TodoContext);
const [todoText, setTodoText] = useState("");
const [editingIndex, setEditingIndex] = useState(-1);
const [editedTodo, setEditedTodo] = useState("");
const handleAddTodo = () => {
if (todoText.trim() !== "") {
dispatch({ type: "ADD_TODO", payload: todoText });
setTodoText("");
}
};
const handleDeleteTodo = (index) => {
dispatch({ type: "DELETE_TODO", payload: index });
};
const handleEditTodo = (index, newTodo) => {
dispatch({ type: "EDIT_TODO", payload: { index, newTodo } });
setEditingIndex(-1);
setEditedTodo("");
};
ความรับผิดชอบด้านฟังก์ชันที่กล่าวมาข้างต้นครอบคลุมการจัดการงานของผู้ใช้ภายในสถานะของบริบท รวมถึงการเพิ่มเติม การลบ และการแก้ไข
มิดเดิลแวร์มีหน้าที่ตรวจสอบให้แน่ใจว่าการเปลี่ยนแปลงใด ๆ ที่ทำโดยผู้ใช้ต่อสิ่งที่ต้องทำ เช่น การเพิ่ม การลบ หรือการแก้ไข ส่งผลให้มีการส่งการอัปเดตที่ถูกต้องไปยังตัวลดขนาดของร้านค้า เพื่อให้สามารถจัดการและรักษาการแสดงข้อมูลที่แม่นยำได้ ของสถานะของแอปพลิเคชัน
เรนเดอร์องค์ประกอบสิ่งที่ต้องทำ
รวมส่วนประกอบสิ่งที่ต้องทำภายในบริบทของส่วนประกอบหน้าโดยการนำเข้า
เพื่อดำเนินงานที่ต้องการ โปรดเข้าถึงไฟล์ “page.js” ที่อยู่ในโฟลเดอร์ “src/app” ของโปรเจ็กต์ของคุณ เมื่อคุณเข้าถึงไฟล์นี้แล้ว โปรดลบโค้ดที่มีอยู่ล่วงหน้าที่ไม่จำเป็นซึ่งเกี่ยวข้องกับ Next.js ออก และใส่ข้อมูลโค้ดที่ให้มาในนั้น
import styles from './page.module.css'
import Todo from '../components/Todo'
export default function Home() {
return (
<main className={styles.main}>
<Todo/>
</main>
)
}
แน่นอนว่าด้วยการใช้ React Context ในแอปพลิเคชัน To-do Next.js เราสามารถจัดการและจัดการกระบวนการจัดการสถานะได้อย่างมีประสิทธิภาพมากขึ้น
การใช้ React Context API ด้วยเทคโนโลยีการจัดการสถานะอื่น ๆ
การผสานรวม React Context API เข้ากับโซลูชันการจัดการสถานะเพิ่มเติม เช่น Redux มอบโอกาสในการใช้ประโยชน์จากทั้งสองระบบควบคู่กัน ด้วยการใช้กลยุทธ์แบบไฮบริดนี้ นักพัฒนาสามารถใช้ประโยชน์จากจุดแข็งของแต่ละเทคโนโลยีที่เกี่ยวข้อง และเพิ่มประสิทธิภาพการทำงานของแอปพลิเคชันของตนได้โดยการใช้เครื่องมือที่เหมาะสมที่สุดสำหรับส่วนประกอบที่สำคัญเฉพาะภายในสถาปัตยกรรมซอฟต์แวร์
ด้วยแนวทางนี้ เราสามารถใช้ประโยชน์จากข้อดีที่นำเสนอโดยวิธีการจัดการสถานะต่างๆ เพื่อพัฒนาระบบซอฟต์แวร์ที่มีประสิทธิภาพและมีการจัดระเบียบอย่างดี