Redux ve RTK'nin React Uygulamasına Kurulumu

Bu derste, React bileşenlerimizin Redux ile birlikte çalışmasını sağlayan React-Redux paketini ve Redux Toolkit (kısaca RTK) aracını uygulamamıza kuracağız.

Projemizi açalım ve terminalde aşağıdaki komutu yazalım:

npm install @reduxjs/toolkit react-redux

Şimdi, uygulamamızın global durumunun saklanacağı bir depo (store) oluşturmamız gerekiyor. Başlangıç olarak src klasöründe bir app klasörü oluşturacağız, ve içinde bir store.js dosyası. Sonra bu dosyaya RTK'dan configureStore içe aktarmamız gerekiyor:

import { configureStore } from '@reduxjs/toolkit'

Sonra boş bir store oluşturalım ve en az bir reducer ileteelim:

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

React bileşenlerimizin store ile çalışabilmesi için şunları yapacağız. İçinde halihazırda kod bulunan main.jsx dosyamıza gidelim:

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

İçe aktarımlara, bir önceki adımda oluşturduğumuz store ve Provider bileşenini ekleyelim:

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

Sonra ana bileşenimiz App'i Provider içine saralım ve ona bir prop olarak store'u iletelim:

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

Ve nihayet, ana React bileşeni App içine aşağıdaki kodu yerleştirelim:

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

export default App

Projemizi tekrar başlatalım ve tarayıcı penceresinde görelim: 'This is my first Redux app!'. Geçerli bir reducer olmaması konusundaki uyarıyı şimdilik gözardı edelim. Her şey yolunda, tebrikler :).

Uygulamanıza, derste anlatıldığı gibi Redux ve RTK'yi kurun. Uygulamanızın çalıştığından emin olun.