Redux және RTK-ны React-қолданбаға орнату

Бұл сабақта біз өз қолданбамызға React компоненттерінің Redux-пен бірге жұмыс істеуіне мүмкіндік беретін React-Redux пакетін және Redux Toolkit (қысқартылған атауы RTK) құралын орнатамыз.

Өз жобамызды ашып, терминаледе келесі команданы енгіземіз:

npm install @reduxjs/toolkit react-redux

Енді бізге қолданбамыздың жаһалдық күйі сақталатын store қоймасын құру керек. Бастау үшін src бумасында app бумасын жасаймыз, содан кейін оның ішінде store.js файлын құрамыз. Сосын осы файлға біз RTK-дан configureStore импорттауымыз керек:

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!'. Жарамды редьюсердің жоқтығы туралы ескертуге әлі назар аудармаймыз. Сіздің бәріңіз сәтті болды, құттықтаймын :).

Redux пен RTK-ны сабақта сипатталғандай қолданбаңызға орнатыңыз. Қолданбаңыздың жұмыс істеп тұрғанына көз жеткізіңіз.