Gimana cara kerja useReducer?

disadur dari Logrocket

Photo by Lautaro Andreani on Unsplash

useReducer digunakan untuk menyimpan dan memperbarui state, sama seperti useState Hook. Ia menerima fungsi reducer sebagai parameter pertama dan state awal sebagai yang kedua.

useReducer mengembalikan array yang menyimpan nilai state saat ini dan fungsi dispatch, yang dapat diberikan tindakan dan lalu dipanggil lagi. Ini mirip dengan pola yang digunakan Redux tapi beda dikit.

Misalnya, fungsi useReducer digunakan hanya dengan reducer tertentu. Kita dispatch objek aksi ke reducer itu saja, sedangkan di Redux, fungsi dispatch mengirim objek aksi ke store. Pada saat dispatch, komponen tidak perlu mengetahui reducer yang akan memproses aksi.

Sebagai keterangan, ada tiga blok bangunan utama di Redux:

• store — objek yang tidak dapat diubah (immutable) yang menyimpan data state aplikasi
• reducer — fungsi yang mengembalikan beberapa data state, dipicu oleh aksi type
• action — objek yang memberi tahu reducer cara mengubah state. Harus berisi properti type, dan dapat berisi properti payload secara opsional

Mari kita lihat bagaimana penyusun Redux ini dibandingkan dengan pengelolaan state menggunakan useReducer Hook. Berikut adalah contoh tampilan store di Redux:

import { createStore } from 'redux'

const store = createStore(reducer, [preloadedState], [enhancer])

Dan inilah cara menginisialisasi state dengan useReducer:

const initialState = { count: 0 }

const [state, dispatch] = useReducer(reducer, initialState)

Fungsi reducer di Redux akan menerima state sebelumnya dan action yang didispatch, menghitung state berikutnya, dan mengembalikan objek baru.

Reducer di Redux ikuti sintaks ini:

(state = initialState, action) => newState

Perhatikan contoh berikut:

// perhatikan bahwa statenya = initialState dan memberikan state baru

const reducer = (state = initialState, action) => {
   switch (action.type) {
      case 'ITEMS_REQUEST':
         return Object.assign({}, state, {
            isLoading: action.payload.isLoading
         })
      case ‘ITEMS_REQUEST_SUCCESS':
         return Object.assign({}, state, {
            items: state.items.concat(action.items),
            isLoading: action.isLoading
         })
      default:
         return state;
   }
}

React tidak menggunakan pola Redux(state = initialState, action) => newState, jadi fungsi reducernya bekerja dengan cara yang sedikit berbeda. Begini cara kita membuat reducer dengan React:

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

Berikut contoh action yang dapat dilakukan di Redux:

{ type: ITEMS_REQUEST_SUCCESS, payload: { isLoading: false } }

// pembuat aksi
export function itemsRequestSuccess(bool) {
   return {
      type: ITEMS_REQUEST_SUCCESS,
      payload: {
      isLoading: bool,
    }
   }
}

// dispatch aksi dengan redux
dispatch(itemsRequestSuccess(false))    // untuk meminta fungsi dispatch, kita perlu memberikan action sebagai argumen ke fungsi dispatch

action di useReducer bekerja dengan cara yang serupa:

// bukan kode lengkap
switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    default:
      throw new Error();
  }

// dispatch action dengan useReducer
 <button onClick={() => dispatch({type: 'increment'})}>Increment</button>

Jika type action dalam kode di atas adalah increment, objek state kita bertambah 1.