TypeScript dengan Redux dalam Aplikasi React

Mengintegrasikan TypeScript dengan Redux dalam aplikasi React meningkatkan keamanan tipe dan meningkatkan kemudahan perawatan kode. Panduan ini membahas cara menyiapkan TypeScript dengan Redux, termasuk mendefinisikan tipe dan mengintegrasikan dengan komponen React.

Langkah 1: Instal Ketergantungan

Pertama, instal paket yang diperlukan untuk tipe Redux, React-Redux, dan TypeScript.

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

Langkah 2: Siapkan Toko Redux

Buat penyimpanan Redux dengan TypeScript. Tentukan tipe untuk status dan tindakan, lalu konfigurasikan penyimpanan.

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;

Langkah 3: Tentukan Tindakan dan Pengurang

Buat jenis tindakan, pembuat tindakan, dan pereduksi. Gunakan TypeScript untuk menentukan status dan jenis tindakan untuk pengetikan yang kuat.

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;

Langkah 4: Hubungkan Redux ke Komponen React

Gunakan kait useSelector dan useDispatch dari React-Redux untuk menghubungkan tindakan status dan pengiriman Redux dalam komponen 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;

Langkah 5: Integrasikan Redux Store dengan React

Bungkus komponen React utama dengan komponen Provider dari React-Redux untuk meneruskan penyimpanan Redux ke aplikasi.

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

Kesimpulan

Menggunakan TypeScript dengan Redux dalam aplikasi React menyediakan pengetikan yang kuat dan meningkatkan keandalan kode. Dengan mengikuti langkah-langkah ini, penyimpanan Redux dapat disiapkan dengan TypeScript, tindakan dan pereduksi dapat didefinisikan, dan Redux dapat diintegrasikan dengan komponen React.