TypeScript مع Redux في تطبيق React

يؤدي دمج TypeScript مع Redux في تطبيق React إلى تعزيز أمان النوع وتحسين إمكانية صيانة الكود. يشرح هذا الدليل كيفية إعداد TypeScript مع Redux، بما في ذلك تعريف الأنواع والتكامل مع مكونات React.

الخطوة 1: تثبيت التبعيات

أولاً، قم بتثبيت الحزم اللازمة لأنواع Redux، وReact-Redux، وTypeScript.

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

الخطوة 2: إعداد متجر Redux

قم بإنشاء متجر Redux باستخدام TypeScript. قم بتحديد أنواع الحالة والإجراءات، وقم بتكوين المتجر.

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;

الخطوة 3: تحديد الإجراءات والمخفضات

إنشاء أنواع الإجراءات ومنشئي الإجراءات ومخفضاتها. استخدم TypeScript لتحديد أنواع الحالة والإجراءات للكتابة القوية.

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;

الخطوة 4: ربط Redux بمكونات React

استخدم الخطافين useSelector وuseDispatch من React-Redux لتوصيل حالة Redux وإجراءات الإرسال في مكونات React.

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;

الخطوة 5: دمج متجر Redux مع React

قم بتغليف مكون React الرئيسي باستخدام مكون Provider من React-Redux لتمرير متجر Redux إلى التطبيق.

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')
);

خاتمة

يؤدي استخدام TypeScript مع Redux في تطبيق React إلى توفير كتابة قوية وتعزيز موثوقية التعليمات البرمجية. باتباع هذه الخطوات، يمكن إعداد متجر Redux باستخدام TypeScript، ويمكن تعريف الإجراءات والمخفضات، ويمكن دمج Redux مع مكونات React.