Инсталација на 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-от создаден на претходниот чекор 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!'. На предупредувањето за отсуство на валиден reducer засега не обрнуваме внимание. Сè ви успеа, честитки :).

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