วิธีใช้บริบทการตอบสนองสำหรับการจัดการสถานะใน 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 มอบโอกาสในการใช้ประโยชน์จากทั้งสองระบบควบคู่กัน ด้วยการใช้กลยุทธ์แบบไฮบริดนี้ นักพัฒนาสามารถใช้ประโยชน์จากจุดแข็งของแต่ละเทคโนโลยีที่เกี่ยวข้อง และเพิ่มประสิทธิภาพการทำงานของแอปพลิเคชันของตนได้โดยการใช้เครื่องมือที่เหมาะสมที่สุดสำหรับส่วนประกอบที่สำคัญเฉพาะภายในสถาปัตยกรรมซอฟต์แวร์

ด้วยแนวทางนี้ เราสามารถใช้ประโยชน์จากข้อดีที่นำเสนอโดยวิธีการจัดการสถานะต่างๆ เพื่อพัฒนาระบบซอฟต์แวร์ที่มีประสิทธิภาพและมีการจัดระเบียบอย่างดี