Цель Redux Toolkit

Мы уже знаем, что Redux — это мощная библиотека управления состоянием для наших приложений JavaScript, особенно при работе с React.
Но работать с redux сложно из-за тяжелого кода для настройки redux. Это затрудняет поддержку и отладку. Именно здесь на помощь приходит Redux Toolkit.
Проблемы, которые решает инструментарий Redux

• Настройка магазина слишком сложна.
• Добавление множества пакетов для работы с Redux, например, промежуточного программного обеспечения, инструментов.
• Для настройки Redux требуется слишком много кода

Набор инструментов Redux — это официальный и рекомендуемый способ написания логики Redux. Он предоставляет набор инструментов для упрощения разработки, сокращения шаблонного кода, что помогает обеспечить масштабируемость и удобство обслуживания приложения.

Основные преимущества Redux Toolkit:

1. Меньше шаблонного кода: устраните необходимость в создателях действий и константах.
2. Упрощенная настройка магазина: предоставляет единый API для настройки магазина с разумными настройками по умолчанию.
3. Встроенная поддержка неизменности и DevTools: автоматически включает Redux DevTools и интегрируется с Immer для обеспечения неизменности.
4. Лучшая поддержка TypeScript: обеспечивает более качественную печать и хорошо интегрируется с TypeScript.

Мы можем использовать набор инструментов Redux с любой библиотекой JavaScript, поэтому мы настраиваем набор инструментов Redux с помощью реакции.

Настройка Redux Toolkit в приложении React

Шаг 1. Создайте новый проект React

Сначала давайте создадим новое приложение React. Для этой цели вы можете использовать create-react-app или Vite. Для простоты мы будем использовать create-react-app.

npx create-react-app redux-toolkit-example
cd redux-toolkit-example

Шаг 2. Установите Redux Toolkit и React-Redux

Далее установите необходимые пакеты: @reduxjs/toolkit и act-redux.

npm install @reduxjs/toolkit react-redux

1. Понимание срезов и редукторов

Срез — это набор логики и действий редуктора Redux для конкретной функции вашего приложения. Redux Toolkit предоставляет функцию createSlice, которая помогает создать фрагмент состояния с минимальным шаблоном.

Шаг 1. Создайте фрагмент
Давайте создадим простой счетчик-срез. Создайте новый файл с именем counterSlice.js в каталоге функций/счетчика:

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value  = 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value  = action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

Здесь мы определяем срез с именем counter с начальным состоянием и тремя редукторами (инкремент, декремент и инкремент по амаунту). Функция createSlice автоматически генерирует создателей действий для каждой функции редуктора.

1. Настройка Redux Store

Теперь, когда у нас есть фрагмент, давайте настроим хранилище Redux. Redux Toolkit предоставляет функцию configureStore, которая настраивает хранилище с хорошими настройками по умолчанию.

Шаг 1. Создайте магазин
Создайте файл store.js внутри каталога приложения:

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Шаг 2. Добавьте магазин в свое приложение
Оберните свое приложение React в компонент из React-Redux и передайте его в хранилище. Обновите файл index.js:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './app/store';

ReactDOM.render(
  ,
  document.getElementById('root')
);

1. Подключение компонентов к хранилищу

Чтобы взаимодействовать с хранилищем Redux, используйте хуки useSelector и useDispatch, предоставленные response-redux.
Шаг 1. Доступ к состоянию с помощью useSelector
Используйте перехватчик useSelector для доступа к состоянию из хранилища

// src/features/counter/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    

      
{count}
       dispatch(increment())}>Increment
       dispatch(decrement())}>Decrement
       dispatch(incrementByAmount(5))}>Increment by 5
    
  );
};

export default Counter;

Шаг 2. Используйте компонент счетчика в своем приложении
Импортируйте и используйте компонент Counter в основном компоненте приложения:

// src/App.js
import React from 'react';
import Counter from './features/counter/Counter';

function App() {
  return (
    

      
  );
}

export default App;

1. Заключение и следующие шаги

В этой части мы рассмотрели основы настройки Redux Toolkit в приложении React, включая создание слайсов, настройку хранилища и подключение компонентов к хранилищу Redux с помощью хуков. В следующей части мы углубимся в обработку асинхронной логики с помощью createAsyncThunk для получения данных из API и управления различными состояниями загрузки.

Следите за обновлениями, часть 2: Advanced Redux Toolkit — асинхронная логика с createAsyncThunk!