Инсталација на 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-от создаден на претходниот чекор 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>This is my first Redux app!</h2>
}

export default App

Повторно ја стартуваме нашата апликација и гледаме во прозорецот на прелистувачот: 'This is my first Redux app!'. На предупредувањето за отсуство на валиден reducer засега не обрнуваме внимание. Сè ви успеа, честитки :).