Redux we RTK-nı React aplikasiýasyna gurnamak

Bu sapakda biz öz aplikasiýamyza React komponentleriniň Redux bilen birikdä işlemegine mümkinçilik berýän React-Redux paketini we Redux Toolkit guralyny (gysgaldylyp RTK) gurnarys.

Öz taslamamyzy açalyň we terminalda aşakdaky buýrugy ýazalyň:

npm install @reduxjs/toolkit react-redux

Indi biz öz aplikasiýamyzyň global ýagdaýyny saklajak ammary store döretmeli. Başlangyç üçin src papkasynyň içinde biz app papkasyny, onuň içinde bolsa store.js faýlyny döredýäris. Soňra bu faýla biz RTK-dan configureStore import etmeli:

import { configureStore } from '@reduxjs/toolkit'

Soňra boş ammar döredip, azyndan bir reducer (ýygnadyjy) ugratmaly:

export default configureStore({
	reducer: {}
});

Bizim React komponentlerimiziň ammar bilen işleýip bilmegi üçin, biz aşakdakylary ederis. Öz main.jsx faýlymyza gireris, onuň içinde eýýäm kod bar:

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>,
)

Import-a öňki ädimde döredilen store we Provider komponentini goşýan setirleri goşarys:

import store from './app/store'
import { Provider } from 'react-redux'

Soňra esasy komponentimiz App Provider içine goýarys, we onuň prop-sy hökmünde store ugradyarys:

<React.StrictMode>
	<Provider store={store}>
		<App />
	</Provider>
</React.StrictMode>

We, ahyrsoňy, esasy React komponentinde App aşakdaky kody ýerleşdireris:

function App() {
	return <h2>Bu meniň ilkinji Redux aplikasiýam!</h2>
}

export default App

Taslamamyzy ýenede işledýäris we brauzer penjiresinde görýäris: 'Bu meniň ilkinji Redux aplikasiýam!'. Dogry reducer (ýygnadyjy) ýoklygy baradaky duýduryşyma häzirlik üns bermeýäris. Size ähli üstünlikli boldy, gutlaýaryn :).

Sapakda görkezilişi ýaly, aplikasiýaňyza Redux we RTK gurnaň. Aplikasiýaňyzyň işleýändigine göz ýetiriň.