Instalarea Redux și RTK în aplicația React

În această lecție, vom instala în aplicația noastră pachetul React-Redux, care permite componentelor React să lucreze împreună cu Redux și instrumentul Redux Toolkit (prescurtat RTK).

Deschideți proiectul nostru și tastați în terminal următoarea comandă:

terminalnpm install @reduxjs/toolkit react-redux

Acum trebuie să creăm un depozit store, în care va fi stocată starea globală a aplicației noastre. Pentru început, în directorul src vom crea directorul app, iar în el fișierul store.js. Apoi în acest fișier trebuie să importăm configureStore din RTK:

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

Apoi, creăm un store gol și îi transmitem cel puțin un reducer:

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

Pentru ca componentele noastre React să poată lucra cu store-ul, vom face următoarele. Vom merge în fișierul nostru main.jsx, în care avem deja codul:

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

În importuri, vom adăuga linii cu store creat la pasul anterior și componenta Provider:

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

Apoi, vom împăcți componenta noastră principală App în Provider, și îi vom transmite ca prop store:

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

Și, în final, în componenta principală React App vom plasa următorul cod:

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

export default App

Pornim din nou proiectul nostru și vedem în fereastra browserului: 'This is my first Redux app!'. Pe avertismentul despre absența unui reducer valid îl ignorăm deocamdată. Ați reușit, felicitări :).