Redux: pola manajemen state di React Native

Q: Apa perbedaan Redux dengan Context API di React?

Redux — solusi lengkap dengan Store, DevTools, Middleware, dan state imutabel. Context API — mekanisme bawaan React untuk transmisi data tanpa props drilling. Context cocok untuk tema global dan lokalisasi, Redux — untuk state kompleks dengan operasi asinkron, caching, dan debugging. Di aplikasi besar, Context menyebabkan render ulang yang tidak perlu, Redux dengan selector memecahkan masalah ini.

Q: Apa itu Immer di Redux Toolkit?

Immer — pustaka untuk bekerja dengan state secara imutabel, bawaan Redux Toolkit. Immer memungkinkan penulisan reducer seolah-olah memutasi state secara langsung: state.value += 1. Di balik layar, Immer membuat objek proxy (draft), melacak perubahan, dan mengembalikan objek imutabel baru. Ini mengurangi volume kode reducer hingga 50% dan menghilangkan mutasi yang tidak disengaja.

Q: Bagaimana cara menguji Redux?

Logika Redux diuji secara terisolasi: Reducer — fungsi murni, cukup dipanggil dengan Action berbeda dan periksa hasilnya. Action Creator — periksa objek yang dikembalikan. Thunk — mock API, panggil dispatch, dan periksa Action apa yang dikirim. Komponen dengan useSelector — gunakan Provider dengan Store pengujian di renderer. Redux DevTools membantu menulis tes dengan mereproduksi urutan Action dari sesi nyata.

Q: Kapan menggunakan Redux daripada useState?

useState cukup untuk state lokal satu komponen: teks bidang, modal terbuka/tertutup. Redux diperlukan ketika state dibagikan di antara banyak layar, memerlukan sinkronisasi asinkron (data dari server), harus dipertahankan antara restart aplikasi (persist), atau memerlukan debugging time-travel. Untuk aplikasi kecil, Redux berlebihan — gunakan Context + useReducer.

Q: Apa itu normalize di Redux?

Normalizr — pustaka untuk menormalisasi data bersarang menjadi struktur Store yang datar. Alih-alih menyimpan objek dalam seperti user.posts[0].comments, normalisasi membuat kamus: entities.users, entities.posts, entities.comments dengan referensi berdasarkan ID. Ini menyederhanakan pembaruan satu entitas di semua tempat dan mempercepat selector. Redux Toolkit merekomendasikan data yang dinormalisasi untuk model kompleks.

Penulis: IT Sectr Diterbitkan: 2026-02-19 Waktu membaca: 8 mnt

Redux — container manajemen state yang dapat diprediksi untuk aplikasi JavaScript, dibuat oleh Dan Abramov pada tahun 2015. Redux mengimplementasikan aliran data satu arah berdasarkan arsitektur Flux: state disimpan dalam satu Store, diubah hanya melalui fungsi Reducer murni, dan dipicu melalui Action dengan Dispatch. Menurut data npm Trends, Redux mempertahankan lebih dari 7 juta unduhan mingguan, tetap menjadi standar manajemen state di React Native dan aplikasi web.

Poin Utama

Store — satu-satunya sumber kebenaran, menyimpan seluruh pohon state aplikasi
Action — objek dengan field type, menggambarkan niat untuk mengubah state
Reducer — fungsi murni (prevState, action) => newState tanpa efek samping
Dispatch — metode Store untuk mengirim Action ke Reducer
Middleware — lapisan antara dispatch dan reducer untuk operasi asinkron dan pencatatan log

Apa itu Redux?

Redux — pola arsitektur dan pustaka untuk manajemen state, berdasarkan tiga prinsip: satu-satunya sumber kebenaran (single source of truth), state hanya-baca (read-only), dan perubahan melalui fungsi murni. Tidak seperti MVC di mana model dapat mengubah state secara tidak terduga, Redux menjamin determinisme: dengan data masukan yang sama, hasilnya selalu sama.

Redux terinspirasi oleh arsitektur Flux dari Facebook dan bahasa Elm. Perbedaan utama dari Flux — satu Store, bukan beberapa. Di Redux, seluruh state aplikasi — objek, array, flag pemuatan — disimpan dalam satu pohon. Ini menyederhanakan debugging, pengujian, dan pemulihan state (time-travel debugging). Pengembang dapat menyimpan seluruh Store, mereproduksi urutan Action, dan melihat bagaimana state berubah di setiap langkah.

Menurut data State of JS 2025, 68% responden yang menggunakan manajemen state memilih Redux atau Redux Toolkit. Alat ini didukung oleh semua framework modern: React, React Native, Angular, Vue, dan bahkan JavaScript murni tanpa framework.

Aliran data satu arah

Unidirectional data flow — prinsip utama Redux, di mana data bergerak secara ketat dalam satu arah: View → Action → Dispatch → Reducer → Store → View. Tidak ada komponen yang dapat mengubah Store secara langsung. View hanya berlangganan perubahan melalui useSelector atau connect dan memicu perubahan melalui dispatch.

Siklus kerja Redux: pengguna menekan tombol → komponen memanggil dispatch({ type: 'INCREMENT' }) → Store meneruskan Action ke Root Reducer → Reducer menghitung state baru → Store memberi tahu pelanggan → View digambar ulang dengan data baru. Siklus ini menjamin bahwa setiap perubahan memiliki penyebab yang jelas dalam bentuk Action tertentu.

DevTools — alat bawaan Redux untuk memantau setiap Action, state Store, dan waktu eksekusi. Pengembang melihat daftar semua Action yang dikirim, perbedaan state (diff) sebelum dan sesudah, dan dapat kembali ke state sebelumnya. Ini membuat debugging state kompleks puluhan kali lebih cepat dibandingkan pencatatan log biasa.

Komponen utama Redux

Store — objek yang berisi seluruh pohon state. Dibuat melalui configureStore (RTK) atau createStore. Store menyediakan tiga metode: getState() untuk membaca, dispatch(action) untuk mengubah, dan subscribe(listener) untuk berlangganan. Di Redux Toolkit, Store sudah menyertakan middleware, DevTools, dan dukungan slice.

TypeScript

import { configureStore } from '@reduxjs/toolkit'

interface CounterState {
  value: number
}

const initialState: CounterState = { value: 0 }

function counterReducer(
  state = initialState,
  action: { type: string }
): CounterState {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 }
    default:
      return state
  }
}

const store = configureStore({ reducer: counterReducer })
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState()) // { value: 1 }

Action dan Action Creator — Action adalah objek dengan field wajib type (konstanta string) dan opsional payload (data). Action Creator — fungsi yang mengembalikan Action. Di Redux Toolkit, createAction digunakan untuk menghasilkan Action dengan pengetikan otomatis.

Reducer — fungsi murni yang menerima state saat ini dan Action, mengembalikan state baru. Reducer tidak boleh: memutasi state (mengembalikan objek baru), memanggil API, menghasilkan angka acak, atau mengakses Date. Imutabilitas dijamin oleh operator spread ... atau Immer (bawaan RTK).

Komponen	Tanggung jawab	Batasan
Store	Penyimpanan state, dispatch, subscribe	Satu per aplikasi
Action	Deskripsi niat mengubah state	Harus memiliki type
Reducer	Perhitungan state baru	Fungsi murni, tanpa efek samping
Dispatch	Pengiriman Action ke Reducer	Sinkron secara default
Selector	Ekstraksi data dari Store	Memoization melalui createSelector

Middleware dan Redux Thunk

Middleware — rantai fungsi yang disisipkan antara panggilan dispatch dan saat Action mencapai Reducer. Setiap middleware menerima API Store dan dapat mencatat, memodifikasi, menunda, atau membatalkan Action. Redux Thunk — middleware standar untuk operasi asinkron, memungkinkan dispatch fungsi alih-alih objek.

JavaScript

import { createAsyncThunk } from '@reduxjs/toolkit'

export const fetchUser = createAsyncThunk(
  'users/fetchById',
  async (userId: number, { rejectWithValue }) => {
    const response = await fetch(`/api/users/${userId}`)
    if (!response.ok)
      return rejectWithValue('Failed to fetch')
    return await response.json()
  }
)

Middleware populer: Redux Thunk — untuk panggilan asinkron sederhana, Redux Saga — untuk skenario kompleks dengan saga-generator (debounce, race, permintaan paralel), Redux Observable — berbasis RxJS untuk aliran reaktif. Di Redux Toolkit, middleware dihubungkan melalui parameter middleware di configureStore.

Menurut survei State of JS 2025, Thunk digunakan di 72% proyek Redux, Saga — di 18%, Observable — di 5%. Untuk sebagian besar aplikasi, kombinasi Thunk + RTK Query sudah cukup untuk mencakup 95% skenario kerja asinkron dengan data.

Redux Toolkit dan RTK Query

Redux Toolkit (RTK) — cara resmi yang direkomendasikan untuk menulis logika Redux, dirilis pada tahun 2019. RTK mencakup configureStore, createSlice, createAsyncThunk, dan createEntityAdapter, mengurangi kode boilerplate Redux hingga 60-70%. Alih-alih membuat Action Creator, Reducer, dan tipe secara manual, digunakan satu createSlice.

TypeScript

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment(state) { state.value += 1 },
    incrementByAmount(state, action: PayloadAction<number>) {
      state.value += action.payload
    }
  }
})

export const { increment, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

RTK Query — solusi bawaan untuk bekerja dengan API berdasarkan Redux Toolkit. Memungkinkan mendefinisikan endpoint secara deklaratif melalui createApi dengan pembuatan hook otomatis, caching, invalidasi tag, dan pembaruan optimistis. RTK Query menggantikan penulisan manual Thunk, Reducer, dan Selector untuk setiap permintaan API.

Entity Adapter — utilitas createEntityAdapter untuk normalisasi koleksi entitas. Menyediakan reducer CRUD bawaan, selector, dan pengurutan untuk array objek. Jika Store menyimpan daftar pengguna, produk, atau pesanan — Entity Adapter mengurangi kode reduksi hingga 80%.

Redux di React Native

React Native Redux — kombinasi standar untuk aplikasi seluler di JavaScript. Redux diintegrasikan melalui Provider dari react-redux yang membungkus komponen root aplikasi. Hook useSelector dan useDispatch memberikan komponen akses ke state tanpa props drilling. Persist — redux-persist menyimpan Store di AsyncStorage atau MMKV, memulihkan state setelah restart aplikasi.

Middleware untuk React Native: redux-flipper untuk debugging melalui Flipper, redux-observable untuk aliran reaktif dengan driver native, react-native-mmkv untuk penyimpanan persisten cepat. Plugin navigasi redux-first-router menghubungkan layar dengan Store, memungkinkan pemulihan state layar saat kembali.

Di React Native, Redux digunakan bersama strategi network-first: aplikasi pertama-tama mencoba memuat data dari server, kemudian menyimpannya di Store melalui RTK Query atau redux-persist. Mode offline dicapai dengan kombinasi Redux + NetInfo + antrian Action untuk pengiriman ulang saat koneksi dipulihkan.

Pertanyaan yang Sering Diajukan

Apa perbedaan Redux dengan Context API di React?

Redux — solusi lengkap dengan Store, DevTools, Middleware, dan state imutabel. Context API — mekanisme bawaan React untuk transmisi data tanpa props drilling. Context cocok untuk tema global dan lokalisasi, Redux — untuk state kompleks dengan operasi asinkron, caching, dan debugging. Di aplikasi besar, Context menyebabkan render ulang yang tidak perlu, Redux dengan selector memecahkan masalah ini.

Apa itu Immer di Redux Toolkit?

Immer — pustaka untuk bekerja dengan state secara imutabel, bawaan Redux Toolkit. Immer memungkinkan penulisan reducer seolah-olah memutasi state secara langsung: state.value += 1. Di balik layar, Immer membuat objek proxy (draft), melacak perubahan, dan mengembalikan objek imutabel baru. Ini mengurangi volume kode reducer hingga 50% dan menghilangkan mutasi yang tidak disengaja.

Bagaimana cara menguji Redux?

Logika Redux diuji secara terisolasi: Reducer — fungsi murni, cukup dipanggil dengan Action berbeda dan periksa hasilnya. Action Creator — periksa objek yang dikembalikan. Thunk — mock API, panggil dispatch, dan periksa Action apa yang dikirim. Komponen dengan useSelector — gunakan Provider dengan Store pengujian di renderer. Redux DevTools membantu menulis tes dengan mereproduksi urutan Action dari sesi nyata.

Kapan menggunakan Redux daripada useState?

useState cukup untuk state lokal satu komponen: teks bidang, modal terbuka/tertutup. Redux diperlukan ketika state dibagikan di antara banyak layar, memerlukan sinkronisasi asinkron (data dari server), harus dipertahankan antara restart aplikasi (persist), atau memerlukan debugging time-travel. Untuk aplikasi kecil, Redux berlebihan — gunakan Context + useReducer.

Apa itu normalize di Redux?

Normalizr — pustaka untuk menormalisasi data bersarang menjadi struktur Store yang datar. Alih-alih menyimpan objek dalam seperti user.posts[0].comments, normalisasi membuat kamus: entities.users, entities.posts, entities.comments dengan referensi berdasarkan ID. Ini menyederhanakan pembaruan satu entitas di semua tempat dan mempercepat selector. Redux Toolkit merekomendasikan data yang dinormalisasi untuk model kompleks.

Kesimpulan

Redux — container state yang dapat diprediksi dengan satu Store dan Reducer murni
Action — objek dengan type, Reducer — fungsi murni, Dispatch — mekanisme pengiriman
Redux Toolkit — API resmi dengan createSlice, createAsyncThunk, dan RTK Query
Middleware — lapisan untuk asinkron: Thunk, Saga, Observable
React Native terintegrasi melalui Provider, useSelector, dan redux-persist untuk mode offline
DevTools — debugging time-travel dengan reproduksi setiap Action
Normalizr — normalisasi data untuk selector dan pembaruan yang efisien

Kami akan mengembangkan aplikasi seluler turnkey

IT Sectr membuat aplikasi iOS dan Android untuk startup dan bisnis sejak 2017. Kami akan memberi saran dan mengusulkan solusi terbaik.

Diskusikan proyek