React යෙදුමක Redux සහ RTK ස්ථාපනය කිරීම

මෙම පාඩමෙහිදී අපි අපගේ යෙදුමට React-Redux පැකේජය ස්ථාපනය කරන්නෙමු, එය React කොටස් Redux සමඟ සම්බන්ධ වී වැඩ කිරීමට ඉඩ දෙන අතර අපි Redux Toolkit (කෙටියෙන් RTK) මෙවලම ද ස්ථාපනය කරන්නෙමු.

අපගේ ව්‍යාපෘතිය විවෘත කර මෙම විධානය ටර්මිනලයේ ටයිප් කරමු:

terminalnpm install @reduxjs/toolkit react-redux

දැන් අපට store ගබඩාවක් නිර්මාණය කිරීමට අවශ්‍ය වේ, එහිදී අපගේ යෙදුමේ ගෝලීය තත්වය ගබඩා වේ. පළමුවෙන් src ෆෝල්ඩරය තුළ අපි app ෆෝල්ඩරයක් නිර්මාණය කරමු, ඉන්පසු එහි store.js ගොනුවක්. ඉන්පසු මෙම ගොනුවට අපට RTK වෙතින් configureStore ආයාත කිරීමට අවශ්‍ය වේ:

app/store.jsimport { configureStore } from '@reduxjs/toolkit'

ඊළඟට, හිස් store එකක් නිර්මාණය කර අවම වශයෙන් එක් reducer එකක් හෝ එයට ලබා දෙමු:

app/store.jsexport default configureStore({
  reducer: {}
});

අපගේ React කොටස් store සමඟ වැඩ කිරීමට හැකි වන පරිදි, අපි පහත දේ කරන්නෙමු. අපගේ main.jsx ගොනුව වෙත යමු, එහිදී අපට දැනටමත් කේතය අඩංගු වේ:

main.jsximport 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 සංරචකය යොදා ගන්නා පේළි එකතු කරමු:

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

ඉන්පසු, අපගේ ප්‍රධාන සංරචකය වන App Provider තුළට අවතන්‍ කර, ප්‍රොප් එකක් ලෙස එයට store ලබා දෙමු:

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

අවසානයේ, ප්‍රධාන React සංරචකය වන App තුළ පහත කේතය තබමු:

App.jsxfunction App() {
  return <h2>This is my first Redux app!</h2>
}

export default App

අපගේ ව්‍යාපෘතිය නැවත ආරම්භ කර බ්‍රව්සර් කවුළුවෙහි අපට පෙනෙන්නේ: 'This is my first Redux app!'. වලංගු reducer එකක් නොමැති බව පිළිබඳ අනතුරු ඇඟවීම පිළිබඳව දැනට අපි අවධානය නොදක්වමු. ඔබ සියල්ල සාර්ථකව කළා, සුබ පැතුම් :).