TypeScript mit Redux in einer React-Anwendung

Die Integration von TypeScript mit Redux in eine React-Anwendung erhöht die Typensicherheit und verbessert die Wartbarkeit des Codes. Diese Anleitung führt Sie durch die Einrichtung von TypeScript mit Redux, einschließlich der Definition von Typen und der Integration mit React-Komponenten.

Schritt 1: Abhängigkeiten installieren

Installieren Sie zunächst die erforderlichen Pakete für die Typen Redux, React-Redux und TypeScript.

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

Schritt 2: Redux Store einrichten

Erstellen Sie den Redux-Store mit TypeScript. Definieren Sie Typen für den Status und die Aktionen und konfigurieren Sie den Store.

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;

Schritt 3: Aktionen und Reduzierer definieren

Erstellen Sie Aktionstypen, Aktionsersteller und Reduzierer. Verwenden Sie TypeScript, um die Status- und Aktionstypen für starke Typisierung zu definieren.

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;

Schritt 4: Redux mit React-Komponenten verbinden

Verwenden Sie die Hooks useSelector und useDispatch von React-Redux, um den Redux-Status zu verbinden und Aktionen in React-Komponenten zu dispatchen.

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;

Schritt 5: Redux Store mit React integrieren

Umschließen Sie die Haupt-React-Komponente mit der Komponente Provider von React-Redux, um den Redux-Speicher an die Anwendung zu übergeben.

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

Abschluss

Die Verwendung von TypeScript mit Redux in einer React-Anwendung bietet eine starke Typisierung und verbessert die Codezuverlässigkeit. Durch Befolgen dieser Schritte kann der Redux-Speicher mit TypeScript eingerichtet, Aktionen und Reduzierer definiert und Redux in React-Komponenten integriert werden.