React Uygulamasında Redux ile TypeScript

TypeScript'i bir React uygulamasında Redux ile entegre etmek, tür güvenliğini artırır ve kod sürdürülebilirliğini iyileştirir. Bu kılavuz, türleri tanımlama ve React bileşenleriyle entegre etme dahil olmak üzere TypeScript'i Redux ile kurmayı ele alır.

Adım 1: Bağımlılıkları Yükleyin

Öncelikle Redux, React-Redux ve TypeScript tipleri için gerekli paketleri kuralım.

npm install redux react-redux @reduxjs/toolkit
npm install @types/react-redux --save-dev

Adım 2: Redux Store'u Ayarlayın

TypeScript ile Redux deposunu oluşturun. Durum ve eylemler için türleri tanımlayın ve depoyu yapılandırın.

import { configureStore } from '@reduxjs/toolkit';
import { rootReducer } from './reducers';

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

const store = configureStore({
  reducer: rootReducer,
});

export default store;

Adım 3: Eylemleri ve Azaltıcıları Tanımlayın

Eylem türleri, eylem yaratıcıları ve azaltıcılar oluşturun. Güçlü yazım için durum ve eylem türlerini tanımlamak üzere TypeScript'i kullanın.

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface CounterState {
  value: number;
}

const initialState: CounterState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

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

Adım 4: Redux'u React Bileşenlerine Bağlayın

React bileşenlerinde Redux durumunu bağlamak ve eylemleri dağıtmak için React-Redux'tan useSelector ve useDispatch kancalarını kullanın.

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from './store';
import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const count = useSelector((state: RootState) => state.counter.value);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(10))}>Increment by 10</button>
    </div>
  );
};

export default Counter;

Adım 5: Redux Store'u React ile entegre edin

Redux deposunu uygulamaya geçirmek için ana React bileşenini React-Redux'tan Provider bileşeniyle sarın.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Çözüm

Bir React uygulamasında Redux ile TypeScript kullanmak güçlü yazım sağlar ve kod güvenilirliğini artırır. Bu adımları izleyerek, Redux deposu TypeScript ile ayarlanabilir, eylemler ve azaltıcılar tanımlanabilir ve Redux, React bileşenleriyle entegre edilebilir.