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

export default App

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