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!'. Ба огоҳии дастрас набудани редюсери эътибордор ҳоло таваҷҷӯҳ надонем. Ҳама чиз барои шумо анҷом ёфт, табрик мекунам :).

Redux ва RTK-ро дар барномаи худ насб кунед, тавре ки дар дарс тавсиф шудааст. Боварӣ ҳосил кунед, ки барномаи шумо кор мекунад.