React Projesine Redux Toolkit ekleyelim ⚛️

Bir önceki yazımda Webpack ile React projesi oluşturma adımlarından bahsetmiştim. Bu yazıda da o projeye Redux Toolkit eklemeye basit bir örnek ile değineceğim 🙂

Redux Toolkit ile Redux da geliştirme yaparken karşılaşılan karmaşıklık ve zorluk azaldı. Redux ile çalışırken kullandığımız paketler redux toolkit içerisinde gelmektedir. Örnek: Async işlemler için redux-thunk, Immutable state yönetimi için immerjs, Selector library reselect.

İlk olarak redux toolkit’i projemize ekleyelim.

yarn add @reduxjs/toolkit react-redux

Reduc Toolkitte bulunan API’lar:

configureStore() : reducerları tanımlamamızı sağlar.
createReducer() : reducer tanımlamamızı , dışarı aktarmamızı sağlar.
createAction() : actionları dışarı aktarmamızı sağlar.
createSlice() : sliceların oluşturulmasını sağlar.
createAsyncThunk: async işlemleri yönetmeyi sağlar. Promise’in dönüş durumuna bağlı olarak (pending, fulfilled, rejected) bir action çağırır.
createSelector : selectorleri tanımlamamızı sağlar.

Redux Toolkit ile store oluşturma:

CounterSlice’ı oluşturalım.

import { createSlice } from '@reduxjs/toolkit'

const initialState = { value: 0 }

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value++
    },
    decrement: (state) => {
      state.value--
    },
  },
})

export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer

name ile Reducer ismi tanımlanır.
initialState ile slice’ın statelerinin ilk değerlerinin ataması yapılır.
reducers ile action tiplerine göre tanımlamalar yapılır. Redux reducerdaki switch-case gibi.

src klasörü altında redux/store.js dosyasında redux-toolkit ile store oluşturalım.

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './slices/counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

index.js dosyamıza <Provider> ile store’u ekleyelim.

import React from 'react'
import { createRoot } from 'react-dom/client'
import { Provider } from 'react-redux'
import { store } from './redux/store'
import App from './App'

const rootElement = document.getElementById('root')
const root = createRoot(rootElement)
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

Oluşturduğumuz Slice’ı kullanabilmek için Counter componentini oluşturalım ve içerisinde reducer actionlarımızı kullanalım. useSelector ile slice içerisindeki state değerimizi okuyabiliyoruz.

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from '../../redux/slices/counterSlice'

export const Counter = () => {
  const counterValue = useSelector((state) => state?.counter?.value)
  const dispatch = useDispatch()

  const handleIncrement = () => {
    dispatch(increment())
  }
  const handleDecrement = () => {
    dispatch(decrement())
  }
  return (
    <div>
      <button onClick={handleIncrement}>Increment</button>
      <div>{counterValue}</div>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  )
}

export default Counter

Counter componentini App.js dosyamıza ekleyelim.

import React from 'react'
import { Counter } from './components/Counter/Counter'

const App = () => {
  return (
    <div>
      <Counter />
    </div>
  )
}

export default App

Okuduğun için teşekkürler 💐

Proje Github Link

Kaynakça

Elif