Usanikishaji wa Redux na RTK kwenye Programu ya React

Katika kipindi hili tutasanikisha kwenye programu yetu kifurushi cha React-Redux, kinachoruhusu vipengele vya React kufanya kazi pamoja na Redux na chombo cha Redux Toolkit (kifupi RTK).

Wacha tufungue mradi wetu na kuandika kwenye terminali amri ifuatayo:

npm install @reduxjs/toolkit react-redux

Sasa tunahitaji kuunda duka la kuhifadhi (store), ambalo litahifadhi hali ya kimataifa ya programu yetu. Kuanza, kwenye folda src tutaunda folda app, na ndani yake faili store.js. Kisha kwenye hii faili tunahitaji kuagiza configureStore kutoka RTK:

import { configureStore } from '@reduxjs/toolkit'

Ifuatayo tutaunda store tupu na kuipitisha angalau reducer moja:

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

Ili vipengele vyetu vya React viweze kufanya kazi na store, tutafanya yafuatayo. Tutaingia kwenye faili letu main.jsx, ambamo tayari kuna msimbo:

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

Kwenye usanikishaji tutaongeza mistari na store iliyoundwa hatua iliyopita na kipengele Provider:

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

Kisha tutafunika kipengele chetu kikuu App kwa Provider, na kama prop tutaipitisha store:

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

Na, mwishowe, kwenye kipengele kikuu cha React App tutaweka msimbo ufuatao:

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

export default App

Tuanzisha tena mradi wetu na tuone kwenye dirisha la kivinjari: 'This is my first Redux app!'. Kwa onyo la kutokuwepo kwa reducer sahihi kwa sasa tusilitegemei. Umefanikiwa, nakupongeza :).

Sanikisha kwenye programu yako Redux na RTK, kama ilivyoelezwa kwenye somo. Hakikisha kuwa programu yako inafanya kazi.