feat(i18n): translate src/content/learn/managing-state.md from English to Vietnamese #476
+42
−42
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
chriskhoa
requested changes
Jun 22, 2025
| --- | ||
|
|
||
| <Intro> | ||
|
|
||
| As your application grows, it helps to be more intentional about how your state is organized and how the data flows between your components. Redundant or duplicate state is a common source of bugs. In this chapter, you'll learn how to structure your state well, how to keep your state update logic maintainable, and how to share state between distant components. | ||
| Khi ứng dụng của bạn ngày càng lớn, việc có ý thức hơn về cách tổ chức state và luồng data chảy giữa các component sẽ rất hữu ích. State dư thừa hoặc trùng lặp là nguyên nhân phổ biến gây ra một loạt bug khó hiểu. Trong chương này, bạn sẽ học cách cấu trúc state một cách tốt, cách giữ cho logic cập nhật state dễ bảo trì, và cách chia sẻ state giữa các component ở xa nhau. |
There was a problem hiding this comment.
Suggested change
| Khi ứng dụng của bạn ngày càng lớn, việc có ý thức hơn về cách tổ chức state và luồng data chảy giữa các component sẽ rất hữu ích. State dư thừa hoặc trùng lặp là nguyên nhân phổ biến gây ra một loạt bug khó hiểu. Trong chương này, bạn sẽ học cách cấu trúc state một cách tốt, cách giữ cho logic cập nhật state dễ bảo trì, và cách chia sẻ state giữa các component ở xa nhau. | |
| Khi ứng dụng của bạn ngày càng lớn, việc có chủ ý hơn về cách tổ chức state và luồng data chảy giữa các component sẽ rất hữu ích. State dư thừa hoặc trùng lặp là nguyên nhân phổ biến gây ra một loạt bug khó hiểu. Trong chương này, bạn sẽ học cách cấu trúc state một cách chặt chẽ, cách giữ cho logic cập nhật state dễ bảo trì, và cách chia sẻ state giữa các component ở xa nhau. |
| * [How to consolidate complex state logic in a function](/learn/extracting-state-logic-into-a-reducer) | ||
| * [How to pass information without "prop drilling"](/learn/passing-data-deeply-with-context) | ||
| * [How to scale state management as your app grows](/learn/scaling-up-with-reducer-and-context) | ||
| * [Cách suy nghĩ về thay đổi UI như những thay đổi state](/learn/reacting-to-input-with-state) |
There was a problem hiding this comment.
Suggested change
| * [Cách suy nghĩ về thay đổi UI như những thay đổi state](/learn/reacting-to-input-with-state) | |
| * [Cách suy nghĩ về thay đổi UI khi state thay đổi](/learn/reacting-to-input-with-state) |
| * [How to pass information without "prop drilling"](/learn/passing-data-deeply-with-context) | ||
| * [How to scale state management as your app grows](/learn/scaling-up-with-reducer-and-context) | ||
| * [Cách suy nghĩ về thay đổi UI như những thay đổi state](/learn/reacting-to-input-with-state) | ||
| * [Cách cấu trúc state một cách tốt](/learn/choosing-the-state-structure) |
There was a problem hiding this comment.
Suggested change
| * [Cách cấu trúc state một cách tốt](/learn/choosing-the-state-structure) | |
| * [Cách cấu trúc state một cách chặt chẽ](/learn/choosing-the-state-structure) |
|
|
||
| Structuring state well can make a difference between a component that is pleasant to modify and debug, and one that is a constant source of bugs. The most important principle is that state shouldn't contain redundant or duplicated information. If there's unnecessary state, it's easy to forget to update it, and introduce bugs! | ||
| Cấu trúc state tốt có thể tạo ra sự khác biệt giữa một component dễ dàng sửa đổi và debug, và một component có hành vi khó đoán với một loạt bug khó hiểu. Nguyên tắc quan trọng nhất là state không nên chứa thông tin dư thừa hoặc trùng lặp. Nếu có state không cần thiết, rất dễ quên cập nhật nó và tạo ra bug! |
There was a problem hiding this comment.
Suggested change
| Cấu trúc state tốt có thể tạo ra sự khác biệt giữa một component dễ dàng sửa đổi và debug, và một component có hành vi khó đoán với một loạt bug khó hiểu. Nguyên tắc quan trọng nhất là state không nên chứa thông tin dư thừa hoặc trùng lặp. Nếu có state không cần thiết, rất dễ quên cập nhật nó và tạo ra bug! | |
| Cấu trúc state tốt có thể tạo ra sự khác biệt giữa một component dễ dàng sửa đổi và debug, và một component có hành vi khó đoán với một loạt bug khó hiểu. Nguyên tắc quan trọng nhất là state không nên chứa thông tin dư thừa hoặc trùng lặp. Nếu có state không cần thiết, ta rất dễ quên cập nhật nó và tạo ra bug! |
|
|
||
| <LearnMore path="/learn/choosing-the-state-structure"> | ||
|
|
||
| Read **[Choosing the State Structure](/learn/choosing-the-state-structure)** to learn how to design the state shape to avoid bugs. | ||
| Đọc **[Chọn Cấu Trúc State](/learn/choosing-the-state-structure)** để học cách thiết kế hình dạng state để tránh bug. |
There was a problem hiding this comment.
Suggested change
| Đọc **[Chọn Cấu Trúc State](/learn/choosing-the-state-structure)** để học cách thiết kế hình dạng state để tránh bug. | |
| Đọc **[Chọn Cấu Trúc State](/learn/choosing-the-state-structure)** để học cách thiết kế cấu trúc state để tránh bug. |
|
|
||
| Usually, you will pass information from a parent component to a child component via props. But passing props can become inconvenient if you need to pass some prop through many components, or if many components need the same information. Context lets the parent component make some information available to any component in the tree below it—no matter how deep it is—without passing it explicitly through props. | ||
| Thông thường, bạn sẽ truyền thông tin từ component cha đến component con thông qua props. Nhưng việc truyền props có thể trở nên bất tiện nếu bạn cần truyền một prop qua nhiều component, hoặc nếu nhiều component cần cùng một thông tin. Context cho phép component cha cung cấp một số thông tin cho bất kỳ component nào trong cây con bên dưới nó—bất kể nó sâu đến đâu—mà không cần truyền một cách rõ ràng thông qua props. |
There was a problem hiding this comment.
Suggested change
| Thông thường, bạn sẽ truyền thông tin từ component cha đến component con thông qua props. Nhưng việc truyền props có thể trở nên bất tiện nếu bạn cần truyền một prop qua nhiều component, hoặc nếu nhiều component cần cùng một thông tin. Context cho phép component cha cung cấp một số thông tin cho bất kỳ component nào trong cây con bên dưới nó—bất kể nó sâu đến đâu—mà không cần truyền một cách rõ ràng thông qua props. | |
| Thông thường, bạn sẽ truyền thông tin từ component cha đến component con thông qua props. Nhưng việc truyền props có thể trở nên bất tiện nếu bạn cần truyền một prop qua nhiều component, hoặc nếu nhiều component cần cùng một thông tin. Context cho phép component cha cung cấp một số thông tin cho bất kỳ component nào ở bên dưới nó trong cấu trúc cây—bất kể nó sâu đến đâu—mà không cần truyền một cách rõ ràng thông qua props. |
|
|
||
| Reducers let you consolidate a component’s state update logic. Context lets you pass information deep down to other components. You can combine reducers and context together to manage state of a complex screen. | ||
| Reducer cho phép bạn tổng hợp logic cập nhật state của component. Context cho phép bạn truyền thông tin xuống sâu cho các component khác. Bạn có thể kết hợp reducer và context cùng nhau để quản lý state của một màn hình phức tạp. |
There was a problem hiding this comment.
Suggested change
| Reducer cho phép bạn tổng hợp logic cập nhật state của component. Context cho phép bạn truyền thông tin xuống sâu cho các component khác. Bạn có thể kết hợp reducer và context cùng nhau để quản lý state của một màn hình phức tạp. | |
| Reducer cho phép bạn tổng hợp logic cập nhật state của component. Context cho phép bạn truyền thông tin xuống sâu cho các component khác. Bạn có thể kết hợp reducer và context cùng nhau để quản lý state của một giao diện phức tạp. |
|
|
||
| With this approach, a parent component with complex state manages it with a reducer. Other components anywhere deep in the tree can read its state via context. They can also dispatch actions to update that state. | ||
| Với cách tiếp cận này, một component cha có state phức tạp sẽ quản lý nó bằng reducer. Các component khác ở bất kỳ vị trí sâu nào trong cây có thể đọc state của nó thông qua context. Chúng cũng có thể dispatch các action để cập nhật state đó. |
There was a problem hiding this comment.
Suggested change
| Với cách tiếp cận này, một component cha có state phức tạp sẽ quản lý nó bằng reducer. Các component khác ở bất kỳ vị trí sâu nào trong cây có thể đọc state của nó thông qua context. Chúng cũng có thể dispatch các action để cập nhật state đó. | |
| Với cách tiếp cận này, một component cha có state phức tạp sẽ quản lý nó bằng reducer. Các component khác ở bất kỳ vị trí nào sâu trong cây đều có thể đọc state của nó thông qua context. Chúng cũng có thể dispatch các action để cập nhật state đó. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🇻🇳 Vietnamese Translation: Managing State
Hi! I'm contributing as a volunteer translator for vi.react.dev, and this PR adds the Vietnamese translation for the "Managing State" chapter.
What's included
Changes
Looking forward to contributing more translations to the project! 🚀
Tóm tắt những gì đã được dịch:
Tiêu đề và phần Intro:
"Managing State" → "Quản Lý State"
Các phần chính:
Nội dung chính đã dịch: