Redux және RTK-ны React-қолданбаға орнату

Бұл сабақта біз өз қолданбамызға 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!'. Жарамды редьюсердің жоқтығы туралы ескертуге әлі назар аудармаймыз. Сіздің бәріңіз сәтті болды, құттықтаймын :).