TypeScript với Redux trong ứng dụng React

Tích hợp TypeScript với Redux trong ứng dụng React giúp tăng cường tính an toàn của kiểu và cải thiện khả năng bảo trì mã. Hướng dẫn này hướng dẫn thiết lập TypeScript với Redux, bao gồm xác định kiểu và tích hợp với các thành phần React.

Bước 1: Cài đặt các phụ thuộc

Đầu tiên, hãy cài đặt các gói cần thiết cho các loại Redux, React-Redux và TypeScript.

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

Bước 2: Thiết lập Redux Store

Tạo kho Redux bằng TypeScript. Xác định các kiểu cho trạng thái và hành động, và cấu hình kho.

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;

Bước 3: Xác định Hành động và Bộ giảm

Tạo các loại hành động, trình tạo hành động và trình giảm. Sử dụng TypeScript để xác định trạng thái và loại hành động cho kiểu mạnh.

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;

Bước 4: Kết nối Redux với các thành phần React

Sử dụng các hook useSelector và useDispatch từ React-Redux để kết nối trạng thái Redux và các hành động phân phối trong các thành phần 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;

Bước 5: Tích hợp Redux Store với React

Bọc thành phần React chính bằng thành phần Provider từ React-Redux để truyền kho lưu trữ Redux tới ứng dụng.

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

Phần kết luận

Sử dụng TypeScript với Redux trong ứng dụng React cung cấp khả năng gõ mạnh mẽ và tăng cường độ tin cậy của mã. Bằng cách làm theo các bước này, kho Redux có thể được thiết lập bằng TypeScript, các hành động và bộ giảm tốc có thể được xác định và Redux có thể được tích hợp với các thành phần React.