Встановлення та налаштування Redux Toolkit

Щоб почати використовувати Redux Toolkit, необхідно встановити його разом із прив'язками для React.

Виконайте наступну команду у вашому проєкті:

npm install @reduxjs/toolkit react-redux

Це встановить усе необхідне для створення сховища та підключення його до вашого React-додатку.

Налаштування сховища

Створіть новий файл для сховища. Зазвичай його розташовують за адресою:

src/store/store.js

У цьому файлі створіть сховище за допомогою configureStore:

import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {}
});

На цьому етапі сховище порожнє. Додавання редукторів буде розглянуто у наступних розділах.

Підключення Redux до React

Щоб зробити сховище доступним у додатку, обгорніть кореневий компонент у Provider.

Відкрийте головний файл входу (наприклад, main.jsx або index.js) і оновіть його наступним чином:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store/store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

Тепер Redux-сховище доступне у кожному компоненті.