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 Store

צור את חנות 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 Store עם 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.