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

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

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

`npm install @reduxjs/toolkit react-redux`

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

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

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

`export default configureStore({ reducer: {} )`

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

`import 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`:

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

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

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

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

`function App() { return <h2>This is my first Redux app!</h2> } export default App`

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

Установите в вашем приложении Redux и RTK, как описано в уроке. Убедитесь, что ваше приложение работает.

← →
↑