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 орнотуңуз, сабакта сүрөттөлгөндөй. Тиркемеңиздин иштеп жатканына ынаныңыз.