-
Notifications
You must be signed in to change notification settings - Fork 391
Scaling up with reducer and context ru #981
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.
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
Open
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
|
titovmx
titovmx
requested changes
Nov 19, 2024
Collaborator
@titovmx
titovmx
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Спасибо! Хорошая адаптация. Есть повторяющиеся проблемы с пунктуацией, союзами и буквой ё - перепроверьте, пожалуйста.
## Объединение редюсера с контекстом {/*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:
В этом примере из [введения в редюсеры](/learn/extracting-state-logic-into-a-reducer), состояние контролируется редюсером. Функция редюсер содержит в себе всю логику обновления состояния и объявлена в нижней части этого файла:
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
В этом примере из [введения в редюсеры](/learn/extracting-state-logic-into-a-reducer), состояние контролируется редюсером. Функцияредюсер содержит в себе всю логику обновления состояния и объявлена в нижней части этого файла:
В этом примере из [введения в редюсеры](/learn/extracting-state-logic-into-a-reducer), состояние контролируется редюсером. Функция-редюсер содержит в себе всю логику обновления состояния и объявлена в нижней части этого файла:
В данном случае это сложное существительное, состоящее из двух слов, для которого нужно использовать дефис
</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`.** Что бы дать доступ к чтению и изменению списка задач другим компонентам, вам надо явно [передать в дочернии компоненты](/learn/passing-props-to-a-component) в виде пропсов, текущее состояние и обработчики событий для его изменения.
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
Редюсер помогает сделать обработчики событий краткими и лаконичными. Однако по мере роста вашего приложения вы можете столкнуться с другой трудностью. **В настоящее время, состояние `tasks` и функция `dispatch` доступны только на верхнем уровне, в компоненте `TaskApp`.** Что бы дать доступ к чтению и изменению списка задач другим компонентам, вам надо явно [передать в дочернии компоненты](/learn/passing-props-to-a-component) в виде пропсов, текущее состояние и обработчики событий для его изменения.
Редюсер помогает сделать обработчики событий краткими и лаконичными. Однако по мере роста вашего приложения вы можете столкнуться с другой трудностью. **В настоящее время, состояние `tasks` и функция `dispatch` доступны только на верхнем уровне, в компоненте `TaskApp`.** Чтобы дать доступ к чтению и изменению списка задач другим компонентам, вам надо явно [передать в дочерние компоненты](/learn/passing-props-to-a-component) в виде пропсов, текущее состояние и обработчики событий для его изменения.
Редюсер помогает сделать обработчики событий краткими и лаконичными. Однако по мере роста вашего приложения вы можете столкнуться с другой трудностью. **В настоящее время, состояние `tasks` и функция `dispatch` доступны только на верхнем уровне, в компоненте `TaskApp`.** Что бы дать доступ к чтению и изменению списка задач другим компонентам, вам надо явно [передать в дочернии компоненты](/learn/passing-props-to-a-component) в виде пропсов, текущее состояние и обработчики событий для его изменения.
For example, `TaskApp` passes a list of tasks and the event handlers to `TaskList`:
Например, `TaskApp` передает список задач и обработчики событий в `TaskList`:
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
Например, `TaskApp` передает список задач и обработчики событий в `TaskList`:
Например, `TaskApp` передаёт список задач и обработчики событий в `TaskList`:
пожалуйста, проверьте использование буквы ё с помощью пакета eyo
Это небольшой пример который хорошо работает, но если у вас десятки или сотни компонентов между начальной точкой, где создаются состояние и функции, и конечной точкой, где они будут использованы, передача их через пропсы может быть крайне затруднительной!
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".**
И поэтому в качестве альтернативы передачи их через пропсы, вы можете поместить в [контекст](/learn/passing-data-deeply-with-context) состояние `tasks` и функцию `dispatch`**Благодаря этому дочернии компоненты `TaskApp` получить доступ к `tasks` и отправлять действия без передачи пропсов через компоненты которым они не нужны.**
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
И поэтому в качестве альтернативы передачи их через пропсы, вы можете поместить в [контекст](/learn/passing-data-deeply-with-context) состояние `tasks` и функцию `dispatch` **Благодаря этому дочернии компоненты `TaskApp` получить доступ к `tasks` и отправлять действия без передачи пропсов через компоненты которым они не нужны.**
И поэтому в качестве альтернативы передачи их через пропсы, вы можете поместить в [контекст](/learn/passing-data-deeply-with-context) состояние `tasks` и функцию `dispatch` **Благодаря этому дочерние компоненты `TaskApp` смогут получить доступ к `tasks` и отправлять действия без передачи пропсов через компоненты, которым они не нужны.**
И поэтому в качестве альтернативы передачи их через пропсы, вы можете поместить в [контекст](/learn/passing-data-deeply-with-context) состояние `tasks` и функцию `dispatch`**Благодаря этому дочернии компоненты `TaskApp` получить доступ к `tasks` и отправлять действия без передачи пропсов через компоненты которым они не нужны.**
Here is how you can combine a reducer with context:
Вот как вы можешь объединить редюсер с контекстом:
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
Вот как вы можешь объединить редюсер с контекстом:
Вот как вы можете объединить редюсер с контекстом:
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. Он будет управлять состоянием с помощью редюсера.
2. Он будет передавать оба контекста дочерним компонентам.
3. Он будет [принимать `children` как пропс](/learn/passing-props-to-a-component#passing-jsx-as-children) что бы вы могли передавать JSX в него.
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
3. Он будет [принимать `children` как пропс](/learn/passing-props-to-a-component#passing-jsx-as-children) что бы вы могли передавать JSX в него.
3. Он будет [принимать `children` как проп,](/learn/passing-props-to-a-component#passing-jsx-as-children) чтобы вы могли передавать JSX в него.
</Sandpack>
You can also export functions that _use_ the context from `TasksContext.js`:
Вы так—же можете экспортировать функции которые _используют_ контекст из `TasksContext.js`:
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
Вы так—же можете экспортировать функции которые _используют_ контекст из `TasksContext.js`:
Вы также можете экспортировать функции, которые _используют_ контекст из `TasksContext.js`:
Союз "также" (в значении и, и ещё) пишется слитно
<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.
Функции похожие на `useTasks` и `useTasksDispatch` называются *[Пользовательские хуки.](/learn/reusing-logic-with-custom-hooks)* Ваша функция считается пользовательским хуком если ее название начинается с `use`. Это позволяет вам использовать другие хуки, такие как `useContext`, внутри неё.
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
Функции похожие на `useTasks` и `useTasksDispatch` называются *[Пользовательские хуки.](/learn/reusing-logic-with-custom-hooks)* Ваша функция считается пользовательским хуком если ее название начинается с `use`. Это позволяет вам использовать другие хуки, такие как `useContext`, внутри неё.
Функции, похожие на `useTasks` и `useTasksDispatch`, называются *[Пользовательские хуки.](/learn/reusing-logic-with-custom-hooks)* Ваша функция считается пользовательским хуком, если её название начинается с `use`. Это позволяет вам использовать другие хуки, такие как `useContext`, внутри неё.
- 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.
- Вы можете комбинировать редюсер с контекстом, что бы любой компонент мог получить доступ к состоянию родительского компонента и изменять его
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
- Вы можете комбинировать редюсер с контекстом, что бы любой компонент мог получить доступ к состоянию родительского компонента и изменять его
- Вы можете комбинировать редюсер с контекстом, чтобы любой компонент мог получить доступ к состоянию родительского компонента и изменять его
- Вы можете комбинировать редюсер с контекстом, что бы любой компонент мог получить доступ к состоянию родительского компонента и изменять его
- Чтобы предоставить состояние и функцию отправителя в дочернии компоненты, надо:
1. Создать два контекста (для состояния и функций отправителей).
2. Экспортируйте оба контекста из компонента в котором объявлен редюсер.
Collaborator
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
2. Экспортируйте оба контекста из компонента в котором объявлен редюсер.
2. Экспортируйте оба контекста из компонента, в котором объявлен редюсер.
Contributor
dimatitov
commented
May 12, 2025
👋 @x1agy Привет! Есть ли планы вернуться к этому ПРу? Если что, могу помочь с правками или доработать его
Author
x1agy
commented
May 12, 2025
👋 @x1agy Привет! Есть ли планы вернуться к этому ПРу? Если что, могу помочь с правками или доработать его
Привет, когда в последний раз смотрел, заметил, что есть ещё много других не переведённых частей. Если приглянулась именно эта часть, эту часть надо доделать в срочном порядке или других частей для перевода нет, то можете доделать этот мр, в другом случае я доделаю его как будет свободное время и настроение.
Contributor
dimatitov
commented
May 12, 2025
@x1agy Понял, спасибо! Если решите доделать — будет замечательно. Главное — чтобы перевод в итоге оказался в основной ветке 🙂
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.
Если ваш пулреквест является исправлением бага, а не переводом, то сперва убедитесь, что проблема относится ТОЛЬКО к https://ru.reactjs.org, а не к https://reactjs.org. Если это не так, то пулреквест следует открыть в родительском репозитории.