Redux en RTK installering in 'n React-applikasie

In hierdie sessie sal ons die React-Redux pakket, wat React-komponente in staat stel om saam met Redux te werk, en die Redux Toolkit (afgekort RTK) in ons toepassing installeer.

Maak ons projek oop en tik die volgende opdrag in die terminal:

npm install @reduxjs/toolkit react-redux

Nou moet ons 'n store skep waarin die globale toestand van ons applikasie gestoor sal word. Eerstens, in die gids src sal ons 'n gids app skep, en daarin die lêer store.js. Dan moet ons configureStore van RTK in hierdie lêer invoer:

import { configureStore } from '@reduxjs/toolkit'

Skep vervolgens 'n leë store en stuur ten minste een reducer deur:

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

Sodat ons React-komponente met die store kan werk, sal ons die volgende doen. Gaan na ons lêer main.jsx, waarin ons reeds die volgende kode het:

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

Voeg die volgende reëls by die invoer: die store wat in die vorige stap geskep is en die komponent Provider:

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

Wikkel dan ons hoofkomponent App in Provider, en stuur die store as 'n prop daaraan:

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

Laastens, plaas die volgende kode in die hoof React-komponent App:

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

export default App

Begin ons projek weer en sien in die blaaiervenster: 'This is my first Redux app!'. Moenie vir nou aandag gee aan die waarskuwing oor die afwesigheid van 'n geldige reducer nie. Jy het dit reggekry, baie geluk :).

Installeer Redux en RTK in jou aansoek, soos beskryf in die les. Maak seker dat jou aansoek werk.