Инсталиране на 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!'. На предупреждението за липса на валиден reducer засега не обръщаме внимание. Всичко се получи, поздравления :).

Инсталирайте във вашето приложение Redux и RTK, както е описано в урока. Уверете се, че вашето приложение работи.