Menggunakan Redux Toolkit untuk Manajemen Status yang Disederhanakan

Manajemen state adalah bagian penting dalam membangun aplikasi web modern, dan Redux telah lama menjadi pilihan populer untuk menangani state dalam aplikasi React. Namun, pengaturan Redux tradisional sering kali membutuhkan kode boilerplate yang ekstensif, sehingga tidak praktis bagi pengembang. Redux Toolkit (RTK) diperkenalkan untuk menyederhanakan manajemen state dengan menyediakan API yang lebih intuitif dengan praktik-praktik terbaik yang sudah ada. Pada artikel ini, kita akan mempelajari Redux Toolkit, manfaatnya, dan bagaimana cara menyederhanakan manajemen state pada aplikasi React.

Apa itu Redux Toolkit?

Redux Toolkit Resmi, cara yang direkomendasikan untuk menulis logika Redux Hal ini memungkinkan Redux lebih mudah digunakan dengan boilerplate yang lebih rendah dan kinerja yang lebih baik. Keuntungan dari RTK Ini menyediakan utilitas untuk konfigurasi penyimpanan, logika peredam, dan tindakan asinkron. Redux Toolkit adalah seperangkat alat yang dibangun di atas redux, hal ini memungkinkan kita untuk mengurangi kode boilerplate, dan membuat redux lebih efisien dan Redux secara umum, membuat pengembang fokus pada fitur-fiturnya, bukan pada kode pengaturan yang berulang-ulang.

sumber: hybridheroes.de

Keuntungan Menulis dengan Redux Toolkit

1. Mengurangi Kode Boilerplate

Bersama dengan Redux, ada persyaratan untuk menulis tipe aksi, pembuat aksi, dan reduksi secara manual. Redux Toolkit memudahkan hal ini dengan fungsi-fungsi seperti createSlice, yang mengambil satu definisi dan secara otomatis membuat action creator dan reducer.

2. Kekekalan bawaan dengan Immer

RTK mengintegrasikan Immer.js dan memungkinkan pengembang untuk menulis kode gaya mutatif yang menghasilkan pembaruan state yang tidak dapat diubah dengan mulus. Lebih penting lagi, ini berarti Object tidak perlu berurusan dengan keabadian secara manual. Dia juga menyebutkan bahwa ada cara lain untuk mendeklarasikan objek, seperti Object.

3. Konfigurasi Penyimpanan Menjadi Mudah

Anda harus menggabungkan reduksi dan menerapkan middleware untuk melakukan langkah metode manual saat menyiapkan redux store. RTK di bawah ini menyediakanconfigureStore yang secara otomatis mengedukasi toko beberapa default yang baik, seperti middleware yang dipasang untuk debugging dan kinerja yang jauh lebih baik.

4. Logika Asinkronisasi yang lebih baik dengan createAsyncThunk

Menangani tindakan asinkron di Redux biasanya mengharuskan Anda menyiapkan beberapa jenis tindakan dan reduksi. Dengan menggunakan createAsyncThunk dari RTK, kita mendapatkan logika asinkronisasi yang mudah yang menangani siklus hidup di balik tirai.

Cara Menggunakan Redux Toolkit

Mari kita lihat contoh pengaturan Redux Toolkit dalam aplikasi React.

Langkah 1: Instal Redux Toolkit

Menginstal Redux Toolkit Untuk memulai dengan Redux Toolkit, kita harus memiliki paket-paket yang diperlukan:

npm install @reduxjs/toolkit react-redux

Langkah 2: Membuat Slice

Dalam Redux Toolkit, slice adalah sebuah file tunggal yang berisi logika dan aksi reducer. Berikut adalah contoh slice untuk mengelola penghitung:

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({

  name: 'counter',

  initialState: { value: 0 },

  reducers: {

    increment: (state) => { state.value += 1; },

    decrement: (state) => { state.value -= 1; },

    incrementByAmount: (state, action) => { state.value += action.payload; },

  },

});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

Langkah 3: Mengonfigurasi Store

Sebagai gantinya, gunakan configureStore alih-alih menggabungkan reducer dan menerapkan middleware secara manual:

import { configureStore } from '@reduxjs/toolkit';

import counterReducer from './counterSlice';

const store = configureStore({

  reducer: {

    counter: counterReducer,

  },

});

export default store;

Langkah 4: Berikan Store ke React

Untuk menggunakan store, kita cukup menggunakan komponen Provider dari react-redux untuk membuatnya tersedia:

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

);

Langkah 5: Gunakan Redux State pada Komponen

Komponen React dapat berinteraksi dengan state Redux menggunakan useSelector dan useDispatch:

import React from 'react';

import { useSelector, useDispatch } from 'react-redux';

import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter = () => {

  const count = useSelector((state) => state.counter.value);

  const dispatch = useDispatch();

  return (

    <div>

      <h1>Count: {count}</h1>

      <button onClick={() => dispatch(increment())}>Increment</button>

      <button onClick={() => dispatch(decrement())}>Decrement</button>

      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>

    </div>

  );

};

export default Counter;

Kesimpulan

Redux Toolkit menyederhanakan manajemen state dengan mengurangi boilerplate, mengintegrasikan Immer untuk keabadian, menyediakan konfigurasi penyimpanan yang mudah, dan menawarkan penanganan asinkronisasi yang lebih baik dengan createAsyncThunk. Dengan mengikuti langkah-langkah yang diuraikan dalam artikel ini, pengembang dapat mengelola state aplikasi secara efisien sambil berfokus pada membangun pengalaman pengguna yang luar biasa. Baik Anda baru mengenal Redux atau pengembang yang berpengalaman, Redux Toolkit adalah alat yang ampuh untuk merampingkan alur kerja Anda. 

Kembali ke>>>> Memahami Manajemen State dalam Aplikasi React

Share :