Установка 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, как описано в уроке. Убедитесь, что ваше приложение работает.