redux-toolkit README

The project's README from github.com/reduxjs/redux-toolkit. As one markdown file: README.md.

Redux Toolkit

GitHub Workflow Status npm version npm downloads

The official, opinionated, batteries-included toolset for efficient Redux development

Installation

Create a React Redux App

The recommended way to start new apps with React and Redux Toolkit is by using our official Redux Toolkit + TS template for Vite, or by creating a new Next.js project using Next's with-redux template.

Both of these already have Redux Toolkit and React-Redux configured appropriately for that build tool, and come with a small example app that demonstrates how to use several of Redux Toolkit's features.

# Vite with our Redux+TS template
# (using the `degit` tool to clone and extract the template)
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

# Next.js using the `with-redux` template
npx create-next-app --example with-redux my-app

We do not currently have official React Native templates, but recommend these templates for standard React Native and for Expo:

An Existing App

Redux Toolkit is available as a package on NPM for use with a module bundler or in a Node application:

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

If you use an AI agent, run npx @tanstack/intent@latest install to install agent skills.

The package includes a precompiled ESM build that can be used as a <script type="module"> tag directly in the browser.

Documentation

The Redux Toolkit docs are available at https://redux-toolkit.js.org, including API references and usage guides for all of the APIs included in Redux Toolkit.

The Redux core docs at https://redux.js.org includes the full Redux tutorials, as well usage guides on general Redux patterns.

Purpose

The Redux Toolkit package is intended to be the standard way to write Redux logic. It was originally created to help address three common concerns about Redux:

We can't solve every use case, but in the spirit of create-react-app, we can try to provide some tools that abstract over the setup process and handle the most common use cases, as well as include some useful utilities that will let the user simplify their application code.

Because of that, this package is deliberately limited in scope. It does not address concepts like "reusable encapsulated Redux modules", folder or file structures, managing entity relationships in the store, and so on.

Redux Toolkit also includes a powerful data fetching and caching capability that we've dubbed "RTK Query". It's included in the package as a separate set of entry points. It's optional, but can eliminate the need to hand-write data fetching logic yourself.

What's Included

Redux Toolkit includes these APIs:

For details, see the Redux Toolkit API Reference section in the docs.

RTK Query

RTK Query is provided as an optional addon within the @reduxjs/toolkit package. It is purpose-built to solve the use case of data fetching and caching, supplying a compact, but powerful toolset to define an API interface layer for your app. It is intended to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself.

RTK Query is built on top of the Redux Toolkit core for its implementation, using Redux internally for its architecture. Although knowledge of Redux and RTK are not required to use RTK Query, you should explore all of the additional global store management capabilities they provide, as well as installing the Redux DevTools browser extension, which works flawlessly with RTK Query to traverse and replay a timeline of your request & cache behavior.

RTK Query is included within the installation of the core Redux Toolkit package. It is available via either of the two entry points below:

import { createApi } from '@reduxjs/toolkit/query'

/* React-specific entry point that automatically generates
   hooks corresponding to the defined endpoints */
import { createApi } from '@reduxjs/toolkit/query/react'

What's included

RTK Query includes these APIs:

See the RTK Query Overview page for more details on what RTK Query is, what problems it solves, and how to use it.

Contributing

Please refer to our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Redux Toolkit.

redux-toolkit (reduxjs/redux-toolkit)

Searching Database…

11.2K ·GitHub
Redux-toolkit
Что это такое?Redux Toolkit — официальный набор инструментов с устоявшимися подходами для написания логики Redux. Он объединяет типовые решения (настройка хранилища, редьюсеры, действия, асинхронная логика, нормализованные данные) в небольшой набор API, так что не приходится писать шаблонный код вручную.
Это самостоятельное средство управления состоянием или всё же нужен Redux?Это библиотека, которая оборачивает и расширяет сам Redux, а не заменяет его. Это рекомендуемый способ писать логику на Redux, в том числе со встроенным слоем загрузки данных под названием RTK Query.
Как добавить его в существующее приложение?Установите его как пакет NPM для работы со сборщиком или Node либо создайте приложение с нуля по официальному шаблону Redux Toolkit + TS для Vite или шаблону with-redux от Next. Оба шаблона уже настроены с React-Redux.
Нужен ли React для его использования?Нет, сам Redux Toolkit не привязан к конкретному фреймворку (для приложений на React его используют вместе с React-Redux). Также есть предварительно собранная сборка ESM, которую можно подключить прямо в браузере через тег script.
Что он намеренно не охватывает?Его область узкая: он не задаёт правил для многократно используемых инкапсулированных модулей Redux, соглашений о структуре папок и файлов, а также того, как управлять связями между сущностями в хранилище.
Что такое RTK Query?RTK Query — необязательный слой для загрузки и кеширования данных, встроенный в пакет поверх ядра Redux Toolkit. Он позволяет описывать конечные точки API с помощью createApi() вместо того, чтобы вручную писать логику загрузки и кеширования.
Какой основной API позволяет описывать редьюсеры и действия вместе?createSlice() объединяет createReducer() и createAction(): вы передаёте ему имя, начальное состояние и функции-редьюсеры, а он сам создаёт редьюсер среза, соответствующие создатели действий и типы.
Как configureStore упрощает настройку хранилища Redux?configureStore() оборачивает исходный createStore с упрощёнными параметрами: автоматически объединяет редьюсеры срезов, добавляет переданное промежуточное ПО (middleware), по умолчанию включает redux-thunk и сразу подключает расширение Redux DevTools.
Как делать неизменяемые обновления без операторов switch?createReducer() позволяет передать таблицу соответствия типов действий функциям-редьюсерам. Внутри он использует Immer, поэтому можно писать обычный на вид код с изменением данных, например 'state.todos[3].completed = true'.
What are similar projects?dva, redux-saga, redux-persist, react-boilerplate, reactotron, redux-devtools, TypeScript-React-Starter, redux
Which topics is it in?redux-saga, redux, frontend-framework, state-management, react, npm, frontend, nodejs, library, typescript, javascript, web
Creator
reduxjs
Size
43.5 MB
Stars
11.2K
Updated
CommitOct 06Releasev2.13.0Sep 29
Age
8y
Commits · 90 Days