Finished translation of "Scaling up with reducer and context" #561
Conversation
|
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. 🤖 Five Pages Changed SizeThe following pages changed size from the code in this PR compared to its base branch:
DetailsOnly the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If Any third party scripts you have added directly to your app using the Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this. |
There was a problem hiding this comment.
Перша частина перевірки: усі ці зауваження мають бути виправлені у всьому PR.
Друга частина перевірки буде після злиття #560 і виправлень першої частини перевірки - інакше у мене накладається складність коректури одного і того ж
|
@astropsy999 можеш ребейзнути? |
astropsy999
force-pushed
the
scaling-up-with-reducer-and-context
branch
from
791de4d to
0d9a5f6
Compare
| * 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 | ||
| * Як поєднати з контекстом |
There was a problem hiding this comment.
| * Як поєднати з контекстом | |
| * Як поєднати редюсер із контекстом |
| * How to avoid passing state and dispatch through props | ||
| * How to keep context and state logic in a separate file | ||
| * Як поєднати з контекстом | ||
| * Як уникнути передачі стану та диспатча через пропси |
There was a problem hiding this comment.
| * Як уникнути передачі стану та диспатча через пропси | |
| * Як уникнути передавання стану та відправляння подій через пропси |
передача -> передавання
https://onlinecorrector.com.ua/%D0%BF%D0%B5%D1%80%D0%B5%D0%B4%D0%B0%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/
|
|
||
| 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: | ||
| Як ми вже бачили, у прикладі з [цього розділу](/learn/extracting-state-logic-into-a-reducer), стан керується редюсером. Функція редюсера містить всю логіку оновлення стану і оголошена в кінці файлу: |
There was a problem hiding this comment.
| Як ми вже бачили, у прикладі з [цього розділу](/learn/extracting-state-logic-into-a-reducer), стан керується редюсером. Функція редюсера містить всю логіку оновлення стану і оголошена в кінці файлу: | |
| Як ми вже бачили у прикладі з [цього розділу](/learn/extracting-state-logic-into-a-reducer), стан керується редюсером. Функція редюсера містить всю логіку оновлення стану і оголошена в кінці файлу: |
| @@ -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. | |||
| Редюсер допомагає тримати обробники подій короткими і зрозумілими. Проте, з розвитком вашого додатка може виникнути проблема. **Наразі стан `tasks` та функція `dispatch` доступні тільки в компоненті `TaskApp` на верхньому рівні.** Щоб інші компоненти могли отримувати та оновлювати перелік завдань, потрібно явно [передавати](#passing-props-to-a-component) пропсами поточний стан і обробники подій. | |||
There was a problem hiding this comment.
| Редюсер допомагає тримати обробники подій короткими і зрозумілими. Проте, з розвитком вашого додатка може виникнути проблема. **Наразі стан `tasks` та функція `dispatch` доступні тільки в компоненті `TaskApp` на верхньому рівні.** Щоб інші компоненти могли отримувати та оновлювати перелік завдань, потрібно явно [передавати](#passing-props-to-a-component) пропсами поточний стан і обробники подій. | |
| Редюсер допомагає тримати обробники подій короткими і зрозумілими. Проте може виникнути проблема, коли ваш застосунок зросте. **Наразі стан `tasks` та функція `dispatch` доступні тільки в компоненті `TaskApp` на верхньому рівні.** Щоб інші компоненти могли отримувати та оновлювати перелік завдань, потрібно явно [передавати](#passing-props-to-a-component) поточний стан і обробники подій, які змінюють його, як пропси. |
додаток -> застосунок
https://onlinecorrector.com.ua/%D0%B7%D0%B0%D1%81%D1%82%D0%BE%D1%81%D1%83%D0%BD%D0%BE%D0%BA-%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%B0/
| @@ -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! | |||
| У невеликому прикладі це добре працює, але якщо у вас є десятки або сотні вкладених компонентів, передавати таким чином весь стан і функції може бути досить неприємно! | |||
There was a problem hiding this comment.
| У невеликому прикладі це добре працює, але якщо у вас є десятки або сотні вкладених компонентів, передавати таким чином весь стан і функції може бути досить неприємно! | |
| У невеликому прикладі це працює добре, але якщо у вас є десятки або сотні вкладених компонентів, передавати так увесь стан і функції може бути досить неприємно! |
таким чином -> так
https://onlinecorrector.com.ua/%D0%BE%D1%82%D0%B6%D0%B5-%D1%83-%D1%82%D0%B0%D0%BA%D0%B8%D0%B9-%D1%81%D0%BF%D0%BE%D1%81%D1%96%D0%B1/
| - 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. | ||
| - Ви можете об'єднати редюсер з контекстом, щоб будь-який компонент міг мати доступ та оновлювати стан у компонентах вищих за ієрархією. |
There was a problem hiding this comment.
| - Ви можете об'єднати редюсер з контекстом, щоб будь-який компонент міг мати доступ та оновлювати стан у компонентах вищих за ієрархією. | |
| - Ви можете об'єднати редюсер із контекстом, щоб будь-який компонент міг отримати та оновити стан, що вище деревом. |
| - Щоб надати стан і функцію `dispatch` компонентам нижче: | ||
| 1. Створіть два контексти (для стану і для функцій `dispatch`). | ||
| 2. Надайте обидва контексти компоненту, який використовує редюсер. | ||
| 3. Використовуйте будь-який контекст у компонентах, яким потрібно мати ці дані. |
There was a problem hiding this comment.
| 3. Використовуйте будь-який контекст у компонентах, яким потрібно мати ці дані. | |
| 3. Використовуйте будь-який із цих контекстів у компонентах, яким вони потрібні. |
| 1. Створіть два контексти (для стану і для функцій `dispatch`). | ||
| 2. Надайте обидва контексти компоненту, який використовує редюсер. | ||
| 3. Використовуйте будь-який контекст у компонентах, яким потрібно мати ці дані. | ||
| - Щоб ще більше спростити компоненти, виносьте ці налаштування в один файл. |
There was a problem hiding this comment.
| - Щоб ще більше спростити компоненти, виносьте ці налаштування в один файл. | |
| - Щоб ще більше спростити компоненти, винесіть відповідну логіку в один файл. |
| 3. Використовуйте будь-який контекст у компонентах, яким потрібно мати ці дані. | ||
| - Щоб ще більше спростити компоненти, виносьте ці налаштування в один файл. | ||
| - Експортуйте компонент, наприклад `TasksProvider`, який надає контекст. | ||
| - Ви також можете експортувати користувацькі хуки, як-от `useTasks` та `useTasksDispatch`, для доступу до контексту. |
There was a problem hiding this comment.
| - Ви також можете експортувати користувацькі хуки, як-от `useTasks` та `useTasksDispatch`, для доступу до контексту. | |
| - Ви також можете експортувати хуки користувача, як-от `useTasks` та `useTasksDispatch`, для доступу до контексту. |
| - Щоб ще більше спростити компоненти, виносьте ці налаштування в один файл. | ||
| - Експортуйте компонент, наприклад `TasksProvider`, який надає контекст. | ||
| - Ви також можете експортувати користувацькі хуки, як-от `useTasks` та `useTasksDispatch`, для доступу до контексту. | ||
| - У додатку може бути багато схожих на цю пар контекст-редюсерів. |
There was a problem hiding this comment.
| - У додатку може бути багато схожих на цю пар контекст-редюсерів. | |
| - У застосунку може бути багато схожих на цю пар "контекст-редюсер". |
No description provided.