Cách sử dụng bối cảnh phản ứng để quản lý trạng thái trong Next.js 13
Next.js đưa ra một số cách tiếp cận để quản lý trạng thái. Mặc dù một số phương pháp này yêu cầu cài đặt thư viện mới, API ngữ cảnh của React được tích hợp sẵn, vì vậy đây là một cách tuyệt vời để giảm sự phụ thuộc bên ngoài.
Bối cảnh phản ứng cho phép truyền thông tin dễ dàng trong toàn bộ hệ thống phân cấp thành phần, loại bỏ nhu cầu khoan chống đỡ xâm nhập. Điều này tỏ ra đặc biệt thuận lợi trong việc duy trì dữ liệu có liên quan trên toàn cầu như trạng thái đăng nhập của người dùng hiện được xác thực và chủ đề ưa thích của họ.
Tìm hiểu API bối cảnh phản ứng
Để đi sâu vào việc triển khai mã một cách hiệu quả, điều quan trọng là phải hiểu biết toàn diện về React Context API và mục đích của nó trong việc giải quyết các thách thức cụ thể.
Việc sử dụng props cho phép truyền thông tin liền mạch giữa các thành phần được kết nối với nhau, tạo điều kiện thuận lợi cho việc truyền dữ liệu từ thành phần cấp trên sang thành phần cấp dưới thông qua cấu trúc phân cấp.
Phương pháp này tỏ ra có lợi vì nó thể hiện rõ ràng các thành phần cụ thể dựa trên thông tin cụ thể, cùng với sự phát triển tiếp theo của dữ liệu đó trong suốt cấu trúc phân cấp của các thành phần.
Tuy nhiên, khó khăn có thể xuất hiện khi các thành phần có cách lồng ghép phức tạp yêu cầu chia sẻ các đạo cụ giống hệt nhau. Những trường hợp như vậy có thể gây ra sự phức tạp và có thể lên đến đỉnh điểm là mã phức tạp khó duy trì hơn. Trong số những mối quan tâm này, cũng như những mối quan tâm khác, liên quan đến những nhược điểm liên quan đến việc khoan chống đỡ.
React Context giải quyết vấn đề truy cập dữ liệu toàn cầu bằng cách đưa ra một cách tiếp cận thống nhất để tạo và sử dụng thông tin phải có sẵn trên nhiều thành phần khác nhau trong ứng dụng.
Việc sử dụng bộ chứa dữ liệu có cấu trúc tạo điều kiện thuận lợi cho việc truy xuất và thao tác thông tin liền mạch bởi các thành phần hệ thống khác nhau. Do đó, hiệu quả tổ chức được nâng cao, đảm bảo chức năng tối ưu trong một mạng lưới phức tạp.
Mã nguồn của dự án này được lưu trữ trên kho lưu trữ GitHub của chúng tôi, nơi các bên quan tâm có thể truy cập được.
Bắt đầu với quản lý trạng thái trong Next.js 13 Sử dụng React Context API
Thành phần máy chủ Next.js cho phép các nhà phát triển xây dựng các ứng dụng tích hợp liền mạch khả năng phản hồi của nền tảng phía máy khách với mức tăng hiệu quả liên quan đến nội dung do máy chủ hiển thị, từ đó mang lại trải nghiệm người dùng vượt trội đồng thời tối ưu hóa hiệu suất.
Theo mặc định, Next.js phiên bản 13 đã kết hợp các Thành phần Máy chủ trong thư mục của ứng dụng, hiện được coi là ổn định. Tuy nhiên, cần lưu ý rằng vì tất cả các thành phần được hiển thị ở phía máy chủ nên có thể phát sinh vấn đề khi cố gắng tích hợp các thư viện hoặc API phía máy khách như React Context.
Một giải pháp hiệu quả để ngăn chặn vấn đề này liên quan đến việc sử dụng cờ “máy khách”, có thể áp dụng cho các tệp JavaScript để thực thi mã phía máy khách.
Để bắt đầu quá trình, bạn có thể thiết lập môi trường phát triển Next.js 13 trên máy cục bộ của mình bằng các bước sau trong thiết bị đầu cuối của bạn:
npx create-next-app@latest next-context-api
Để truy cập vào thư mục của một dự án mới được tạo một cách phức tạp, hãy làm theo các bước sau: 1. Khi bạn đã thiết lập dự án bằng phương pháp thích hợp, hãy tiến hành xác định vị trí thực tế của dự án trên hệ thống tệp của bạn bằng cách điều hướng qua cấu trúc phân cấp của các thư mục và tệp cho đến khi bạn đến thư mục được chỉ định chứa tất cả các thành phần liên quan đến dự án. Quá trình này có thể liên quan đến việc sử dụng giao diện dòng lệnh hoặc giao diện người dùng đồ họa tùy thuộc vào hệ điều hành và sở thích của bạn.
cd next-context-api
Sau đó khởi động máy chủ phát triển:
npm run dev
Khi thiết lập cấu trúc dự án Next.js cơ bản, người ta có thể xây dựng một ứng dụng quản lý tác vụ thô sơ tận dụng API bối cảnh React làm phương tiện quản trị trạng thái chính.
Tạo Nhà cung cấp bối cảnh
Chức năng của nhà cung cấp bối cảnh hoạt động như một nguồn chính mà từ đó các thành phần khác nhau lấy được thông tin toàn cầu cần thiết, cho phép chúng tương tác với môi trường của mình một cách hiệu quả.
Vui lòng tạo một tệp mới có tên src/context/Todo.context.js trong thư mục dự án của bạn và dán đoạn mã sau vào đó:javascriptimport { definContext } from’vuex’;export default defaultContext({id:’todo’,state: ()=> ({todos: [],selectedTodo: null,isAllChecked: false,showForm: false,}),mutations: {setTodos(state, value) {state.todos=value;},addTodo(state, todo ) {if (!state.todos.length) {return;}constupdateTodos=[…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>
);
};
Cấu hình hiện tại thiết lập một khung ngữ cảnh cho React, được gọi là “TodoContext”, bắt đầu với một danh sách tác vụ trống làm trạng thái ban đầu cho ứng dụng.
Ngoài việc thiết lập trạng thái bắt đầu, cấu hình ngữ cảnh này còn kết hợp chức năng giảm tốc nhằm phác thảo một số loại hành động. Việc triển khai các loại hành động này sẽ gây ra những thay đổi về trạng thái của bối cảnh dựa trên các hoạt động được thực hiện. Ví dụ: những hành động này có thể liên quan đến việc chèn, xóa hoặc sửa đổi các mục việc cần làm trong ngữ cảnh.
prop value, đại diện cho trạng thái bắt đầu của bối cảnh và prop reducer, chỉ định hàm hoạt động rút gọn.
Sau khi sử dụng TodoContext bởi một phần tử nhất định, điều kiện hiện tại của bối cảnh nói trên có thể được truy xuất, cùng với khả năng truyền tín hiệu để sửa đổi cách xử lý của nó.
Thêm Nhà cung cấp bối cảnh vào Ứng dụng Next.js
Để trình cung cấp ngữ cảnh được hiển thị ở cấp cao nhất của ứng dụng Next.js của bạn, đảm bảo rằng tất cả các thành phần phía máy khách đều có quyền truy cập vào nó, cần phải đưa ngữ cảnh vào thành phần bố cục gốc của ứng dụng.
Để hoàn thành nhiệm vụ này, vui lòng truy cập vào tệp “src/app/layout.js” và đặt các nút con trong mẫu HTML bằng cách sử dụng trình cung cấp ngữ cảnh như minh họa bên dưới:
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>
);
}
Tạo thành phần việc cần làm
Để tạo một tệp mới trong cấu trúc thư mục được chỉ định, vui lòng làm theo các bước sau: 1. Mở trình soạn thảo văn bản hoặc môi trường phát triển tích hợp (IDE) ưa thích của bạn.2. Điều hướng đến thư mục “src” của dự án của bạn.3. Trong thư mục “src”, tìm và chọn thư mục con “thành phần”.4. Nhấp vào nút “Tệp mới” trong trình soạn thảo văn bản hoặc IDE của bạn để tạo một tài liệu trống mới.5. Lưu tệp vừa tạo với tên “Todo.js”. Việc này phải được thực hiện trong cả thư mục con “thành phần” và thư mục “src” tổng thể.6. Sau khi tệp đã được lưu, bạn có thể tiến hành sao chép và dán đoạn mã được cung cấp vào tệp “Todo.js” mới. Đảm bảo rằng vết lõm
Kết hợp các câu lệnh nhập cần thiết, bao gồm cờ use client và chỉ định thành phần này làm thành phần phía máy khách bằng cách sử dụng các cờ thích hợp trong đoạn mã bên dưới:javascriptimport { use client } from’next/client’;const MyComponent=()=> {const [data, setData]=useState([]);//Sử dụng client flag ở đây…return ( {/* JSX của thành phần của bạn ở đây */} );};export default MyComponent;
"use client"
import { TodoContext } from "@/context/Todo.context";
import React, { useContext, useState } from "react";
Tiếp theo, chúng tôi sẽ mô tả khía cạnh chức năng của ứng dụng bằng cách chỉ định các thành phần HTML sẽ được hiển thị trong trình duyệt web bằng cách sử dụng Ngôn ngữ đánh dấu mở rộng JavaScript (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>
);
}
Thành phần chức năng này bao gồm các phần tử tương tác để thêm, sửa đổi và xóa các tác vụ trong danh sách. Các thành phần này được xây dựng bằng khả năng hiển thị có điều kiện của React, hiển thị các nút chỉnh sửa và xóa tùy thuộc vào giá trị hiện tại của biến lập chỉ mục.
Cuối cùng, người ta phải chỉ định các biến trạng thái cần thiết và triển khai các hàm xử lý thích hợp cho từng loại hành động trong phần thân của thành phần chức năng. Để thực hiện điều này, hãy kết hợp các dòng mã sau.
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("");
};
Các trách nhiệm chức năng nói trên bao gồm việc quản lý các tác vụ của người dùng trong trạng thái của ngữ cảnh, bao gồm việc bổ sung, xóa và sửa đổi chúng.
Phần mềm trung gian chịu trách nhiệm đảm bảo rằng mọi thay đổi do người dùng thực hiện đối với việc cần làm của họ, chẳng hạn như thêm, xóa hoặc chỉnh sửa chúng, sẽ dẫn đến các bản cập nhật chính xác được gửi đến bộ giảm tốc của cửa hàng để nó có thể quản lý và duy trì sự trình bày chính xác. trạng thái của ứng dụng.
Kết xuất thành phần việc cần làm
Kết hợp thành phần Việc cần làm trong ngữ cảnh của thành phần trang bằng cách nhập nó.
Để thực hiện tác vụ mong muốn, vui lòng truy cập vào tệp “page.js” nằm trong thư mục “src/app” của dự án của bạn. Sau khi bạn đã truy cập tệp này, vui lòng xóa mọi mã không cần thiết có sẵn liên quan đến Next.js và chèn đoạn mã được cung cấp vào đó.
import styles from './page.module.css'
import Todo from '../components/Todo'
export default function Home() {
return (
<main className={styles.main}>
<Todo/>
</main>
)
}
Thật vậy, với việc triển khai React Context trong ứng dụng To-do Next.js, người ta có thể xử lý và vận dụng hiệu quả quy trình quản lý trạng thái theo cách hiệu quả hơn.
Sử dụng API bối cảnh React với các công nghệ quản lý trạng thái khác
Việc tích hợp API bối cảnh React với các giải pháp quản lý trạng thái bổ sung như Redux mang đến cơ hội tận dụng song song lợi ích của cả hai hệ thống. Bằng cách sử dụng chiến lược kết hợp này, các nhà phát triển có thể tận dụng điểm mạnh của từng công nghệ tương ứng và tối ưu hóa hiệu suất ứng dụng của họ bằng cách sử dụng các công cụ phù hợp nhất cho các thành phần quan trọng cụ thể trong kiến trúc phần mềm.
Thông qua cách tiếp cận này, người ta có thể tận dụng những lợi thế do các phương pháp quản lý nhà nước khác nhau mang lại để phát triển các hệ thống phần mềm hiệu quả và được tổ chức tốt.