Устаноўка 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, як апісана ў уроку. Пераканайцеся, што ваша праграма працуе.