Skip to content

feat(i18n): src/content/learn/scaling-up-with-reducer-and-context.md from English to Vietnamese #483

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(i18n): src/content/learn/scaling-up-with-reducer-and-context.md from English to Vietnamese #483

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 55 additions & 55 deletions src/content/learn/scaling-up-with-reducer-and-context.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
title: Scaling Up with Reducer and Context
title: Mở rộng quy mô với Reducer và Context
---

<Intro>

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 hợp nhất logic cập nhật state của component. Context cho phép bạn truyền thông tin xuống sâu tới các component khác. Bạn có thể kết hợp reducer và context lại với nhau để quản lý state của một màn hình phức tạp.

</Intro>

<YouWillLearn>

* How to combine a reducer with context
* How to avoid passing state and dispatch through props
* How to keep context and state logic in a separate file
* Cách kết hợp reducer với context
* Cách tránh truyền state và dispatch qua props
* Cách giữ logic context và state trong một file riêng biệt

</YouWillLearn>

## Combining a reducer with context {/*combining-a-reducer-with-context*/}
## Kết hợp reducer với context {/*combining-a-reducer-with-context*/}

In this example from [the introduction to reducers](/learn/extracting-state-logic-into-a-reducer), the state is managed by a reducer. The reducer function contains all of the state update logic and is declared at the bottom of this file:
Trong ví dụ này từ [phần giới thiệu về reducer](/learn/extracting-state-logic-into-a-reducer), state được quản lý bởi một reducer. Function reducer chứa tất cả logic cập nhật state và được khai báo ở cuối file này:

<Sandpack>

Expand Down Expand Up @@ -207,9 +207,9 @@ ul, li { margin: 0; padding: 0; }

</Sandpack>

A reducer helps keep the event handlers short and concise. However, as your app grows, you might run into another difficulty. **Currently, the `tasks` state and the `dispatch` function are only available in the top-level `TaskApp` component.** To let other components read the list of tasks or change it, you have to explicitly [pass down](/learn/passing-props-to-a-component) the current state and the event handlers that change it as props.
Một reducer giúp các event handler ngắn gọn và súc tích. Tuy nhiên, khi ứng dụng của bạn phát triển, bạn có thể gặp phải một khó khăn khác. **Hiện tại, `tasks` state và function `dispatch` chỉ có sẵn trong component cấp cao nhất `TaskApp`.** Để cho phép các component khác đọc danh sách task hoặc thay đổi nó, bạn phải một cách rõ ràng [truyền xuống](/learn/passing-props-to-a-component) state hiện tại và các event handler thay đổi nó dưới dạng props.

For example, `TaskApp` passes a list of tasks and the event handlers to `TaskList`:
Ví dụ, `TaskApp` truyền danh sách task và các event handler tới `TaskList`:

```js
<TaskList
Expand All @@ -219,7 +219,7 @@ For example, `TaskApp` passes a list of tasks and the event handlers to `TaskLis
/>
```

And `TaskList` passes the event handlers to `Task`:
Và `TaskList` truyền các event handler tới `Task`:

```js
<Task
Expand All @@ -229,30 +229,30 @@ And `TaskList` passes the event handlers to `Task`:
/>
```

In a small example like this, this works well, but if you have tens or hundreds of components in the middle, passing down all state and functions can be quite frustrating!
Trong một ví dụ nhỏ như thế này, điều này hoạt động tốt, nhưng nếu bạn có hàng chục hoặc hàng trăm component ở giữa, việc truyền xuống tất cả state và function có thể khá bực bội!

This is why, as an alternative to passing them through props, you might want to put both the `tasks` state and the `dispatch` function [into context.](/learn/passing-data-deeply-with-context) **This way, any component below `TaskApp` in the tree can read the tasks and dispatch actions without the repetitive "prop drilling".**
Đây là lý do tại sao, như một giải pháp thay thế cho việc truyền chúng qua props, bạn có thể muốn đặt cả `tasks` state và function `dispatch` [vào context.](/learn/passing-data-deeply-with-context) **Bằng cách này, bất kỳ component nào bên dưới `TaskApp` trong cây có thể đọc task và dispatch action mà không cần "prop drilling" lặp đi lặp lại.**

Here is how you can combine a reducer with context:
Đây là cách bạn có thể kết hợp reducer với context:

1. **Create** the context.
2. **Put** state and dispatch into context.
3. **Use** context anywhere in the tree.
1. **Tạo** context.
2. **Đặt** state và dispatch vào context.
3. **Use** context ở bất kỳ đâu trong cây.

### Step 1: Create the context {/*step-1-create-the-context*/}
### Bước 1: Tạo context {/*step-1-create-the-context*/}

The `useReducer` Hook returns the current `tasks` and the `dispatch` function that lets you update them:
Hook `useReducer` trả về `tasks` hiện tại và function `dispatch` cho phép bạn cập nhật chúng:

```js
const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
```

To pass them down the tree, you will [create](/learn/passing-data-deeply-with-context#step-2-use-the-context) two separate contexts:
Để truyền chúng xuống cây, bạn sẽ [tạo](/learn/passing-data-deeply-with-context#step-2-use-the-context) hai context riêng biệt:

- `TasksContext` provides the current list of tasks.
- `TasksDispatchContext` provides the function that lets components dispatch actions.
* `TasksContext` cung cấp danh sách task hiện tại.
* `TasksDispatchContext` cung cấp function cho phép các component dispatch action.

Export them from a separate file so that you can later import them from other files:
Export chúng từ một file riêng biệt để sau này bạn có thể import chúng từ các file khác:

<Sandpack>

Expand Down Expand Up @@ -448,11 +448,11 @@ ul, li { margin: 0; padding: 0; }

</Sandpack>

Here, you're passing `null` as the default value to both contexts. The actual values will be provided by the `TaskApp` component.
Ở đây, bạn đang truyền `null` làm giá trị mặc định cho cả hai context. Các giá trị thực tế sẽ được cung cấp bởi component `TaskApp`.

### Step 2: Put state and dispatch into context {/*step-2-put-state-and-dispatch-into-context*/}
### Bước 2: Đặt state và dispatch vào context {/*step-2-put-state-and-dispatch-into-context*/}

Now you can import both contexts in your `TaskApp` component. Take the `tasks` and `dispatch` returned by `useReducer()` and [provide them](/learn/passing-data-deeply-with-context#step-3-provide-the-context) to the entire tree below:
Bây giờ bạn có thể import cả hai context trong component `TaskApp` của mình. Lấy `tasks` và `dispatch` được trả về bởi `useReducer()` và [cung cấp chúng](/learn/passing-data-deeply-with-context#step-3-provide-the-context) cho toàn bộ cây bên dưới:

```js {4,7-8}
import { TasksContext, TasksDispatchContext } from './TasksContext.js';
Expand All @@ -470,7 +470,7 @@ export default function TaskApp() {
}
```

For now, you pass the information both via props and in context:
Hiện tại, bạn truyền thông tin cả qua props và trong context:

<Sandpack>

Expand Down Expand Up @@ -669,11 +669,11 @@ ul, li { margin: 0; padding: 0; }

</Sandpack>

In the next step, you will remove prop passing.
Trong bước tiếp theo, bạn sẽ loại bỏ việc truyền props.

### Step 3: Use context anywhere in the tree {/*step-3-use-context-anywhere-in-the-tree*/}
### Bước 3: Use context ở bất kỳ đâu trong cây {/*step-3-use-context-anywhere-in-the-tree*/}

Now you don't need to pass the list of tasks or the event handlers down the tree:
Bây giờ bạn không cần truyền danh sách task hoặc các event handler xuống cây:

```js {4-5}
<TasksContext value={tasks}>
Expand All @@ -685,15 +685,15 @@ Now you don't need to pass the list of tasks or the event handlers down the tree
</TasksContext>
```

Instead, any component that needs the task list can read it from the `TaskContext`:
Thay vào đó, bất kỳ component nào cần danh sách task có thể đọc nó từ `TaskContext`:

```js {2}
export default function TaskList() {
const tasks = useContext(TasksContext);
// ...
```

To update the task list, any component can read the `dispatch` function from context and call it:
Để cập nhật danh sách task, bất kỳ component nào có thể đọc function `dispatch` từ context và gọi nó:

```js {3,9-13}
export default function AddTask() {
Expand All @@ -713,7 +713,7 @@ export default function AddTask() {
// ...
```

**The `TaskApp` component does not pass any event handlers down, and the `TaskList` does not pass any event handlers to the `Task` component either.** Each component reads the context that it needs:
**Component `TaskApp` không truyền bất kỳ event handler nào xuống, và `TaskList` cũng không truyền bất kỳ event handler nào tới component `Task`.** Mỗi component đọc context mà nó cần:

<Sandpack>

Expand Down Expand Up @@ -897,11 +897,11 @@ ul, li { margin: 0; padding: 0; }

</Sandpack>

**The state still "lives" in the top-level `TaskApp` component, managed with `useReducer`.** But its `tasks` and `dispatch` are now available to every component below in the tree by importing and using these contexts.
**State vẫn "sống" trong component cấp cao nhất `TaskApp`, được quản lý bằng `useReducer`.** Nhưng `tasks` và `dispatch` của nó giờ đây có sẵn cho mọi component bên dưới trong cây bằng cách import và use những context này.

## Moving all wiring into a single file {/*moving-all-wiring-into-a-single-file*/}
## Chuyển tất cả wiring vào một file duy nhất {/*moving-all-wiring-into-a-single-file*/}

You don't have to do this, but you could further declutter the components by moving both reducer and context into a single file. Currently, `TasksContext.js` contains only two context declarations:
Bạn không bắt buộc phải làm điều này, nhưng bạn có thể làm gọn gàng hơn các component bằng cách chuyển cả reducer và context vào một file duy nhất. Hiện tại, `TasksContext.js` chỉ chứa hai khai báo context:

```js
import { createContext } from 'react';
Expand All @@ -910,11 +910,11 @@ export const TasksContext = createContext(null);
export const TasksDispatchContext = createContext(null);
```

This file is about to get crowded! You'll move the reducer into that same file. Then you'll declare a new `TasksProvider` component in the same file. This component will tie all the pieces together:
File này sắp trở nên đông đúc! Bạn sẽ chuyển reducer vào cùng file đó. Sau đó bạn sẽ khai báo một component `TasksProvider` mới trong cùng file. Component này sẽ kết nối tất cả các phần lại với nhau:

1. It will manage the state with a reducer.
2. It will provide both contexts to components below.
3. It will [take `children` as a prop](/learn/passing-props-to-a-component#passing-jsx-as-children) so you can pass JSX to it.
1. Nó sẽ quản lý state bằng reducer.
2. Nó sẽ cung cấp cả hai context cho các component bên dưới.
3. Nó sẽ [nhận `children` làm prop](/learn/passing-props-to-a-component#passing-jsx-as-children) để bạn có thể truyền JSX vào nó.

```js
export function TasksProvider({ children }) {
Expand All @@ -930,7 +930,7 @@ export function TasksProvider({ children }) {
}
```

**This removes all the complexity and wiring from your `TaskApp` component:**
**Điều này loại bỏ tất cả sự phức tạp và wiring khỏi component `TaskApp` của bạn:**

<Sandpack>

Expand Down Expand Up @@ -1121,7 +1121,7 @@ ul, li { margin: 0; padding: 0; }

</Sandpack>

You can also export functions that _use_ the context from `TasksContext.js`:
Bạn cũng có thể export những function *use* context từ `TasksContext.js`:

```js
export function useTasks() {
Expand All @@ -1133,14 +1133,14 @@ export function useTasksDispatch() {
}
```

When a component needs to read context, it can do it through these functions:
Khi một component cần đọc context, nó có thể làm điều đó thông qua những function này:

```js
const tasks = useTasks();
const dispatch = useTasksDispatch();
```

This doesn't change the behavior in any way, but it lets you later split these contexts further or add some logic to these functions. **Now all of the context and reducer wiring is in `TasksContext.js`. This keeps the components clean and uncluttered, focused on what they display rather than where they get the data:**
Điều này không thay đổi hành vi theo bất kỳ cách nào, nhưng nó cho phép bạn sau này tách những context này thêm hoặc thêm một số logic vào những function này. **Bây giờ tất cả wiring context và reducer đều nằm trong `TasksContext.js`. Điều này giữ cho các component sạch sẽ và gọn gàng, tập trung vào những gì chúng hiển thị hơn là nơi chúng lấy dữ liệu:**

<Sandpack>

Expand Down Expand Up @@ -1340,26 +1340,26 @@ ul, li { margin: 0; padding: 0; }

</Sandpack>

You can think of `TasksProvider` as a part of the screen that knows how to deal with tasks, `useTasks` as a way to read them, and `useTasksDispatch` as a way to update them from any component below in the tree.
Bạn có thể nghĩ về `TasksProvider` như một phần của màn hình biết cách xử lý task, `useTasks` như một cách để đọc chúng, và `useTasksDispatch` như một cách để cập nhật chúng từ bất kỳ component nào bên dưới trong cây.

<Note>

Functions like `useTasks` and `useTasksDispatch` are called *[Custom Hooks.](/learn/reusing-logic-with-custom-hooks)* Your function is considered a custom Hook if its name starts with `use`. This lets you use other Hooks, like `useContext`, inside it.
Những function như `useTasks` và `useTasksDispatch` được gọi là *[Custom Hooks.](/learn/reusing-logic-with-custom-hooks)* Function của bạn được coi là Custom Hook nếu tên của nó bắt đầu bằng `use`. Điều này cho phép bạn use các Hook khác, như `useContext`, bên trong nó.

</Note>

As your app grows, you may have many context-reducer pairs like this. This is a powerful way to scale your app and [lift state up](/learn/sharing-state-between-components) without too much work whenever you want to access the data deep in the tree.
Khi ứng dụng của bạn phát triển, bạn có thể có nhiều cặp context-reducer như thế này. Đây là một cách mạnh mẽ để mở rộng quy mô ứng dụng của bạn và [nâng state lên](/learn/sharing-state-between-components) mà không cần quá nhiều công việc bất cứ khi nào bạn muốn truy cập dữ liệu sâu trong cây.

<Recap>

- You can combine reducer with context to let any component read and update state above it.
- To provide state and the dispatch function to components below:
1. Create two contexts (for state and for dispatch functions).
2. Provide both contexts from the component that uses the reducer.
3. Use either context from components that need to read them.
- You can further declutter the components by moving all wiring into one file.
- You can export a component like `TasksProvider` that provides context.
- You can also export custom Hooks like `useTasks` and `useTasksDispatch` to read it.
- You can have many context-reducer pairs like this in your app.
* Bạn có thể kết hợp reducer với context để cho phép bất kỳ component nào đọc và cập nhật state phía trên nó.
* Để cung cấp state và function dispatch cho các component bên dưới:
1. Tạo hai context (cho state và cho dispatch function).
2. Cung cấp cả hai context từ component use reducer.
3. Use context từ các component cần đọc chúng.
* Bạn có thể làm gọn gàng hơn các component bằng cách chuyển tất cả wiring vào một file.
* Bạn có thể export một component như `TasksProvider` để cung cấp context.
* Bạn cũng có thể export các Custom Hook như `useTasks` và `useTasksDispatch` để đọc nó.
* Bạn có thể có nhiều cặp context-reducer như thế này trong ứng dụng của mình.

</Recap>