Инсталација 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>Ово је моја прва Redux апликација!</h2>
}

export default App

Поново покрећемо наш пројекат и видимо у прозору прегледача: 'Ово је моја прва Redux апликација!'. На упозорење о недостатку валидног reducer-а за сада не обраћамо пажњу. Успели сте, честитам :).

Инсталирајте у вашој апликацији Redux и RTK, као што је објашњено на часу. Уверите се да ваша апликација ради.