نحوه استفاده از React Context برای مدیریت حالت در Next.js 13

Context API داخلی React برای اشتراک‌گذاری حالت عالی است. نحوه استفاده از آن را با آخرین نسخه Next.js بیاموزید.

Next.js چندین رویکرد برای مدیریت حالت ارائه می دهد. در حالی که برخی از این روش ها نیاز به نصب کتابخانه های جدید دارند، React’s Context API داخلی است، بنابراین راهی عالی برای کاهش وابستگی های خارجی است.

با React Context، می‌توانید داده‌ها را به‌طور یکپارچه از قسمت‌های مختلف درخت مؤلفه‌تان منتقل کنید و دردسر حفاری پایه را از بین ببرید. این به ویژه برای مدیریت وضعیت جهانی مانند وضعیت ورود کاربر فعلی یا موضوع دلخواه آنها مفید است.

درک React Context API

قبل از ورود به کد، مهم است که بدانیم React Context API چیست و چه مشکلی را برطرف می کند.

Props یک روش موثر برای به اشتراک گذاری داده ها بین اجزا ارائه می دهد. آنها به شما این امکان را می دهند که داده ها را از یک مؤلفه والد به مؤلفه های فرزند آن منتقل کنید.

این رویکرد مفید است زیرا به وضوح نشان می دهد که کدام مؤلفه از داده های خاص استفاده می کند و چگونه آن داده ها در درخت مؤلفه جریان می یابد.

با این حال، مشکلات زمانی به وجود می آیند که اجزای عمیق تو در تو داشته باشید که نیاز به مصرف لوازم مشابه دارند. این وضعیت می‌تواند پیچیدگی‌هایی ایجاد کند و به طور بالقوه منجر به کدهای پیچیده‌ای شود که نگهداری آن سخت‌تر است. این مسائل از جمله معایب حفاری پایه است.

React Context این چالش را با ارائه یک روش متمرکز برای ایجاد و استفاده از داده‌هایی که باید در سراسر اجزای مختلف در دسترس باشد، حل می‌کند.

زمینه ای را برای نگهداری این داده ها تنظیم می کند و به اجزا اجازه می دهد به آن دسترسی داشته باشند. این رویکرد به شما کمک می‌کند پایگاه کد خود را ساختار دهید تا مطمئن شوید که به خوبی سازماندهی شده است.

می توانید کد این پروژه را در مخزن GitHub آن پیدا کنید.

شروع به کار با State Management در Next.js 13 با استفاده از React Context API

Next.js Server Components به شما این امکان را می‌دهد که برنامه‌هایی ایجاد کنید که بهترین استفاده را از هر دو دنیا داشته باشند: تعامل برنامه‌های سمت سرویس گیرنده و مزایای عملکرد رندر سرور.

Next.js 13 به طور پیش فرض اجزای سرور را در فهرست برنامه ها پیاده سازی می کند – که اکنون پایدار است. با این حال، از آنجایی که همه مؤلفه‌ها توسط سرور رندر شده‌اند، ممکن است هنگام ادغام کتابخانه‌های سمت سرویس گیرنده یا APIهایی مانند React Context با مشکل مواجه شوید.

برای جلوگیری از این امر، یک راه‌حل عالی، استفاده از پرچم کلاینت است که می‌توانید روی فایل‌هایی تنظیم کنید که کد سمت کلاینت را اجرا می‌کنند.

برای شروع، با اجرای این دستور در ترمینال خود، یک پروژه Next.js 13 به صورت محلی ایجاد کنید:

npx create-next-app@latest next-context-api

پس از ایجاد پروژه، به دایرکتوری آن بروید:

cd next-context-api

سپس سرور توسعه را راه اندازی کنید:

npm run dev

هنگامی که یک پروژه اصلی Next.js را راه‌اندازی کردید، می‌توانید یک برنامه کارهای اساسی بسازید که از React Context API برای مدیریت وضعیت استفاده می‌کند.

Context Provider را ایجاد کنید

فایل ارائه‌دهنده زمینه به‌عنوان یک مرکز مرکزی عمل می‌کند که در آن وضعیت جهانی را که اجزا باید به آن دسترسی داشته باشند را تعریف و مدیریت می‌کنید.

یک فایل جدید به نام src/context/Todo.context.js ایجاد کنید و کد زیر را پر کنید.

"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 Context یک TodoContext را تعریف می‌کند که در ابتدا وضعیت یک لیست خالی کارها را برای برنامه نگه می‌دارد.

جدا از ایجاد حالت اولیه، این پیکربندی زمینه شامل یک تابع کاهنده است که انواع مختلف عمل را تعریف می کند. این نوع کنش‌ها وضعیت زمینه را بسته به کنش‌های راه‌اندازی شده تغییر می‌دهند. در این مورد، اقدامات شامل افزودن، حذف و ویرایش کارهای انجام شده است.

مؤلفه TodoContextProvider TodoContext را در اختیار سایر مؤلفه های برنامه قرار می دهد. این کامپوننت دو پایه دارد: ارزش پایه که حالت اولیه زمینه است و پروپ کاهنده که تابع کاهنده است.

هنگامی که یک مؤلفه TodoContext را مصرف می کند، می تواند به وضعیت زمینه دسترسی داشته باشد و اقداماتی را برای به روز رسانی وضعیت ارسال کند.

Context Provider را به برنامه 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>
  );
}

یک مؤلفه کاری ایجاد کنید

یک فایل جدید با نام src/components/Todo.js ایجاد کنید و کد زیر را به آن اضافه کنید.

با واردات زیر شروع کنید. اطمینان حاصل کنید که برای علامت گذاری این مؤلفه به عنوان یک مؤلفه سمت کلاینت، پرچم استفاده مشتری را درج کنید.

"use client"

import { TodoContext } from "@/context/Todo.context";
import React, { useContext, useState } from "react";

در مرحله بعد، مؤلفه عملکردی، از جمله عناصر 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("");
  };

این توابع کنترل کننده وظیفه مدیریت افزودن، حذف و ویرایش کارهای کاربر را در حالت متن بر عهده دارند.

آنها اطمینان حاصل می کنند که وقتی کاربر یک کار را اضافه، حذف یا ویرایش می کند، اقدامات مناسب به کاهنده زمینه ارسال می شود تا وضعیت مطابق با آن به روز شود.

مولفه To-Do را رندر کنید

در نهایت، جزء To-do را در کامپوننت صفحه وارد کنید.

برای انجام این کار، فایل page.js را در دایرکتوری src/app باز کنید، کد boilerplate Next.js را حذف کنید و کد زیر را اضافه کنید:

import styles from './page.module.css'
import Todo from '../components/Todo'

export default function Home() {
  return (
    <main className={styles.main}> 
      <Todo /> 
    </main>
  )
}

عالی! در این مرحله، باید بتوانید وضعیت را در برنامه To-do Next.js با استفاده از React Context مدیریت کنید.

استفاده از React Context API با سایر فناوری های مدیریت دولتی

React Context API یک راه حل عالی برای مدیریت حالت است. با این وجود، امکان استفاده از آن در کنار سایر کتابخانه های مدیریت دولتی مانند Redux وجود دارد. این رویکرد ترکیبی تضمین می‌کند که از بهترین ابزار برای بخش‌های مختلف برنامه‌تان که نقش‌های کلیدی را انجام می‌دهند استفاده کنید.

با انجام این کار، می توانید از مزایای راه حل های مختلف مدیریت دولتی برای ایجاد برنامه های کاربردی کارآمد و قابل نگهداری استفاده کنید.

منبع مقاله