Инсталиране на Redux и RTK в React приложение

В този урок ще инсталираме в нашето приложение пакета React-Redux, който позволява на React компоненти да работят в комбинация с Redux и инструмента Redux Toolkit (съкратено RTK).

Нека отворим нашия проект и напишем в терминала следната команда:

terminalnpm install @reduxjs/toolkit react-redux

Сега трябва да създадем хранилище store, в което ще се съхранява глобалното състояние на нашето приложение. Като начало в папката src ще създадем папка app, а в нея файл store.js. След това в този файл трябва да импортираме configureStore от RTK:

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!'. На предупреждението за липса на валиден reducer засега не обръщаме внимание. Всичко се получи, поздравления :).