Установка Redux и RTK в React-приложение

На этом занятии мы установим в наше приложение пакет React-Redux, позволяющий работать React компонентам в связке с Redux и инструмент Redux Toolkit (сокращенно RTK).

Откроем наш проект и наберем в терминале следующую команду:

terminalnpm install @reduxjs/toolkit react-redux

Теперь нам необходимо создать хранилище store, в котором будет хранится глобальное состояние нашего приложения. Для начала в папке src мы создадим папку app, а в ней файл store.js. Затем в этот файл нам нужно импортировать configureStore из RTK:

app/store.jsimport { configureStore } from '@reduxjs/toolkit'

Далее создадим пустой store и передадим хотя бы один reducer:

app/store.jsexport default configureStore({
  reducer: {}
});

Для того, чтобы наши React компоненты могли работать со store, мы проделаем следующее. Зайдем в наш файл main.jsx, в котором у нас уже содержится код:

main.jsximport React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

В импорт добавим строчки с созданным на предыдущим шаге store и компонентом Provider:

main.jsximport store from './app/store'
import { Provider } from 'react-redux'

Затем обернем наш главный компонент App в Provider, а в качестве пропса передадим ему store:

main.jsx<React.StrictMode>
  <Provider store={store}>
    <App />
  </Provider>
</React.StrictMode>

И, наконец, в главном React компоненте App разместим следующий код:

App.jsxfunction App() {
  return <h2>This is my first Redux app!</h2>
}

export default App

Запускаем снова наш проект и видим в окне браузера: 'This is my first Redux app!'. На предупреждение об отсутствии валидного редьюсера пока не обращаем внимание. У вас все получилось, поздравляю :).