Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rajdee/redux-toolkit-in-russian

Original Redux Toolkit documentation with a translation into Russian hacktoberfest Перевод оригинальной документации Redux Toolkit на русском
https://github.com/rajdee/redux-toolkit-in-russian

hacktoberfest hacktoberfest-accepted reactjs redux redux-toolkit

Last synced: 2 months ago
JSON representation

Original Redux Toolkit documentation with a translation into Russian hacktoberfest Перевод оригинальной документации Redux Toolkit на русском

Host: GitHub
URL: https://github.com/rajdee/redux-toolkit-in-russian
Owner: rajdee
License: mit
Created: 2021-01-12T13:53:14.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2022-10-10T05:22:57.000Z (about 2 years ago)
Last Synced: 2024-10-18T09:14:22.106Z (3 months ago)
Topics: hacktoberfest, hacktoberfest-accepted, reactjs, redux, redux-toolkit
Homepage: https://rajdee.gitbook.io/redux-toolkit-in-russian
Size: 426 KB
Stars: 4
Watchers: 2
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

# Redux Toolkit

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/reduxjs/redux-toolkit/CI?style=flat-square)
[![npm version](https://img.shields.io/npm/v/@reduxjs/toolkit.svg?style=flat-square)](https://www.npmjs.com/package/@reduxjs/toolkit)
[![npm downloads](https://img.shields.io/npm/dm/@reduxjs/toolkit.svg?style=flat-square&label=RTK+downloads)](https://www.npmjs.com/package/@reduxjs/toolkit)

**Официальный, самоуверенный набор инструментов с батарейками для эффективной разработки Redux**

(Ранее известный как "Redux Starter Kit")

## Установка

### Используя Create React App

Рекомендованный путь для старта новых приложений с React и Redux Toolkit - использование [официального шаблона Redux+JS](https://github.com/reduxjs/cra-template-redux) для [Create React App](https://github.com/facebook/create-react-app), который использует преимущества интеграции React Redux с компонентами React.

```sh
npx create-react-app my-app --template redux
```

Или, если вы пользователь TypeScript, используйте[cra-template-redux-typescript](https://github.com/reduxjs/cra-template-redux-typescript), который основан на этом шаблоне

```sh
npx create-react-app my-app --template redux-typescript
```

### Существующее приложение

Redux Toolkit доступен, как NPM-пакет для использования с бандлером или в Node приложении:

```bash
# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit
```

Он также доступен, в виде прекомпилированного UMD пакета, который определяет глобальную переменную `window.RTK`
UMD пакет можно использовать напрямую через [тэг ``](https://unpkg.com/@reduxjs/toolkit/dist/redux-toolkit.umd.js).

## Цель

**Redux Toolkit** предназначен для стандартного способа написания логики Redux. Первоначально он был создан для решения трех распространенных проблем, связанных с Redux:

- "Конфигурирование Redux стора слишком сложное"
- "Мне нужно добавить много пакетов, чтобы заставить Redux делать что-то полезное"
- "Redux требует слишком много шаблонного кода"

Мы не можем покрыть все варианты использования, но в духе[`create-react-app`](https://github.com/facebook/create-react-app), мы можем попытаться предоставить некоторые инструменты, которые абстрагируются от процесса установки и покрывают наиболее распространенные варианты использования, а также включают некоторые полезные утилиты, которые будут позволить пользователю упростить код своего приложения.

Из-за этого размер этого пакета намеренно ограничен. Он _не_ обращается к таким концепциям, как "переиспользуемые инкапсулированные модули Redux", структура папок или файлов, отношения управляющих сущностей в сторе и т. д.

Redux Toolkit также включает мощную возможность запроса и кэширования данных, которую мы назвали "RTK Query". Он доступен в пакете по отдельному пути. Это необязательно, но может избавить от необходимости вручную писать логику запроса данных.

## Что включено

Redux Toolkit предоставляет следующие API:

- [`configureStore()`](../api/configureStore.mdx): оборачивает createStore, чтобы предоставить упрощенные параметры конфигурации и значений по умолчанию. Он может автоматически комбинировать ваши слайсы редьюсеров, добавлять любые мидлвары Redux, по умолчанию включает `redux-thunk` и позволяет использовать расширение Redux DevTools.
- [`createReducer()`](../api/createReducer.mdx): позволяет вам использовать таблицу соответствия типов экшенов с функциями редьюсера, вместо написания операторов switch. Кроме того, он автоматически использует [библиотеку `immer`](https://github.com/immerjs/immer) чтобы вы могли писать более простые иммутабельные обновления в обычном мутабельном стиле, например `state.todos[3].completed = true`.
- [`createAction()`](../api/createAction.mdx): создает генератор экшена для переданного типа. В самой функции определена функция `toString ()`, поэтому ее можно использовать вместо константы типа.
- [`createSlice()`](../api/createSlice.mdx): комбинирует `createReducer()` + `createAction()`. Принимает объект с функцией редьюсера, название слайса, значение начального состояния и автоматически создает слайс-редьюсер, с соответствующими генераторами и типами экшенов.
-[`createListenerMiddleware()`](../api/createListenerMiddleware.mdx): позволяет вам определить записи обработчика событий, которые содержат "effect" коллбэк с дополнительной логикой, а также способ указать, когда этот коллбэк должен выполняться на основе отправленных действий или изменений состояния. Облегченная альтернатива асинхронным мидлварам Redux, такому как саги и observables.
- [`createAsyncThunk`](../api/createAsyncThunk.mdx): принимает строку типа экшена и функцию, которая возвращает промис и генерирует thunk, который диспатчит `pending/fulfilled/rejected` типы экшенов на основе этого промиса
- [`createEntityAdapter`](../api/createEntityAdapter.mdx): создает набор переиспользуемых редьюсеров и селекторов, для управления нормализованными данными в сторе
- [Утилита`createSelector`](../api/createSelector.mdx) из библиотеки [Reselect](https://github.com/reduxjs/reselect), реэкспортируемая для удобства использования.

## RTK Query

**RTK Query** поставляется, как дополнительный модуль в пакете @reduxjs/toolkit. Он специально создан для решения вопросов запросов и кэширования данных, предоставляя компактный, но мощный набор инструментов для определения уровня интерфейса API для вашего приложения. Он предназначен для упрощения основных случаев загрузки данных в веб-приложение, устраняя необходимость вручную писать логику выборки и кэширования данных.

RTK Query построен на основе ядра Redux Toolkit, используя внутреннюю архитектуру [Redux](https://redux.js.org/). Хотя знание Redux и RTK не требуется для использования RTK Query, вам следует изучить все дополнительные возможности управления глобальным хранилищем, которые они предоставляют, а также установить [расширение браузера Redux DevTools](https://github.com/reduxjs/ redux-devtools), который безупречно работает с RTK Query для просмотра и воспроизведения временной шкалы вашего запроса и поведения кеша.

RTK Query включен в установку основного пакета Redux Toolkit. Он доступен через любой из двух вариантов:

```ts no-transpile
import { createApi } from '@reduxjs/toolkit/query'

/* Точка входа, специфичная для React, которая автоматически генерирует хуки, соответствующие
определенным конечным точкам */
import { createApi } from '@reduxjs/toolkit/query/react'
```

### Что включено

RTK Query включает следующие API:

- `createApi()`: Ядро функциональности RTK Query. Он позволяет вам определять набор эндпоинтов, описывающих, как извлекать данные из серии эндпоинтов, включая конфигурацию того, как запрашивать и преобразовывать эти данные. В большинстве случаев вы должны использовать это один раз для каждого приложения, используя в качестве практического правила «один фрагмент API на базовый URL-адрес».
- `fetchBaseQuery()`: Небольшая оболочка для fetch, которая упрощает запросы. Предназначен как рекомендуемый baseQuery для использования в createApi для большинства пользователей.
- `<ApiProvider />`: Может использоваться в качестве Provider, если у вас еще нет стора Redux.
- `setupListeners()`: Утилита, используемая для включения поведения refetchOnMount и refetchOnReconnect.

См. страницу [**Обзор RTK Query**](https://redux-toolkit.js.org/rtk-query/overview) для получения дополнительных сведений о том, что такое RTK Query, какие проблемы он решает и как его использовать.

## Документация

Документация Redux Toolkit доступна по адресу **https://redux-toolkit.js.org**.