TypeScript avec Redux dans une application React

L'intégration de TypeScript avec Redux dans une application React améliore la sécurité des types et la maintenabilité du code. Ce guide décrit la configuration de TypeScript avec Redux, notamment la définition des types et l'intégration avec les composants React.

Étape 1: Installer les dépendances

Tout d’abord, installez les packages nécessaires pour les types Redux, React-Redux et TypeScript.

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

Étape 2: Configurer Redux Store

Créez le magasin Redux avec TypeScript. Définissez les types d'état et d'actions, puis configurez le magasin.

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;

Étape 3: Définir les actions et les réducteurs

Créez des types d'actions, des créateurs d'actions et des réducteurs. Utilisez TypeScript pour définir l'état et les types d'actions pour un typage fort.

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;

Étape 4: connecter Redux aux composants React

Utilisez les hooks useSelector et useDispatch de React-Redux pour connecter l'état Redux et les actions de répartition dans les composants 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;

Étape 5: Intégrer Redux Store à React

Enveloppez le composant React principal avec le composant Provider de React-Redux pour transmettre le magasin Redux à l'application.

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

Conclusion

L'utilisation de TypeScript avec Redux dans une application React permet un typage solide et améliore la fiabilité du code. En suivant ces étapes, le magasin Redux peut être configuré avec TypeScript, des actions et des réducteurs peuvent être définis et Redux peut être intégré aux composants React.