React Application တွင် Redux နှင့် RTK ကို တပ်ဆင်ခြင်း

ဤသင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ Application ထဲသို့ React-Redux package ကို တပ်ဆင်ပါမည်။ ၎င်းသည် React component များကို Redux နှင့်အတူ အလုပ်လုပ်စေရန်နှင့် Redux Toolkit (အတိုကောက် RTK) ကိရိယာကို အသုံးပြုခွင့်ပေးပါသည်။

ကျွန်ုပ်တို့၏ project ကိုဖွင့်ပြီး terminal ထဲတွင် အောက်ပါ command ကိုရိုက်ထည့်ပါမည် -

terminalnpm install @reduxjs/toolkit react-redux

ယခု ကျွန်ုပ်တို့သည် store ဟုခေါ်သော သိုလှောင်ရာနေရာ တစ်ခု ဖန်တီးရန် လိုအပ်ပါသည်။ ထို store ထဲတွင် ကျွန်ုပ်တို့၏ application ၏ ကမ္ဘာလုံးဆိုင်ရာ အခြေအနေကို သိမ်းဆည်းထားမည်။ အစပိုင်းအနေဖြင့် src ဖိုဒါထဲတွင် app ဖိုဒါကို ဖန်တီးမည်၊ ထို့နောက် ၎င်းဖိုဒါထဲတွင် store.js ဖိုင်ကို ဖန်တီးမည်။ ထို့နောက် ဤဖိုင်ထဲသို့ RTK မှ configureStore ကို import လုပ်ရန် လိုအပ်သည် -

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

ထို့နောက် ဗလာ store တစ်ခုကို ဖန်တီးပြီး reducer အနည်းဆုံးတစ်ခုကို ထည့်သွင်းပေးပါမည် -

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

ကျွန်ုပ်တို့၏ React component များသည် store နှင့် အလုပ်လုပ်နိုင်ရန် အောက်ပါအတိုင်း လုပ်ဆောင်ပါမည်။ ကျွန်ုပ်တို့၏ main.jsx ဖိုင်ထဲသို့ ဝင်ပါမည်။ ထိုဖိုင်ထဲတွင် အောက်ပါ code များ ပါရှိပြီးဖြစ်သည် -

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

Import လုပ်သည့်နေရာတွင် ယခင်အဆင့်က ဖန်တီးထားသော store နှင့် Provider component ကို အောက်ပါအတိုင်း ထည့်သွင်းပါမည် -

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

ထို့နောက် ကျွန်ုပ်တို့၏ အဓိက component ဖြစ်သော App ကို Provider ဖြင့် ထည့်သွင်းပတ်ယက်ပြီး prop အဖြစ် store ကို ပေးပို့ပါမည် -

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

နောက်ဆုံးအနေဖြင့် အဓိက React component ဖြစ်သော App ထဲတွင် အောက်ပါ code ကို ထည့်သွင်းပါမည် -

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

export default App

ကျွန်ုပ်တို့၏ project ကို ပြန်လည်စတင်ပါ။ ဘရောက်ဆာပြတင်းပေါက်တွင် အောက်ပါစာသားကို မြင်ရပါမည် - 'This is my first Redux app!'။ တရားဝင် reducer မရှိခြင်းဆိုင်ရာ သတိပေးချက်ကို လောလောဆယ် လျစ်လျူရှုထားပါ။ သင်လုပ်ဆောင်နိုင်ခဲ့ပါပြီ၊ ဂုဏ်ယူပါတယ် : )။