Mengenal Redux, State Management Untuk Javascript SPA(Single Page application)

Redux merupakan library untuk manajemen state(data) pada aplikasi  JavaScript.Meskipun pada umumnya Redux digunakan bersama dengan React, tapi pada dasarnya Redux juga bisa digunakan untuk framework JavaScript yang lain.

State merupakan salah satu fitur unggulan yang ada di library front-end modern yang biasa digunakan untuk SPA (Single Page application). Pada dasarnya peran Redux dalam sebuah aplikasi adalah melakukan perubahan state yang dibutuhkan oleh setiap fungsional pada aplikasi. Untuk melakukan perubahaan itu terdapat 4 komponen utama dari aplikasi Redux, yaitu action, reducer, store dan state.

Cara Kerja Redux

App/UI membuat objek Action dan mengirimkannya ke Store. Lalu oleh Store, objek Action diteruskan ke Reducer yang bertugas melakukan update terhadap State. Jika ada pembaruan State maka Store mengirim objek State yang baru ke semua bagian App yang jadi subscriber / listener.
 

1. Action
Action adalah objek sederhana yang wajib punya properti bernama type & bertipe string. Action boleh berisi data lain yang mungkin diperlukan untuk update state, tapi yang paling pokok adalah type.

const add_data = {
  type:'ADD_DATA',
  value: 10
}
const start = {
  type: 'START'
}

2. Reducer
Reducer adalah bagian redux yang merubah state menjadi respon yang terjadi ketika Action di dispatch(). Untuk merubah state hanya bisa dilakukan di Reducer, dan Reducer hanya melakukan perubahan state jika ada action yang di dispatch() . Secara sederhana reducer ini hanya sebuah function yang mengembalikan state baru.

const initialState = { 
	value: 10
}
const reducer = (state = initialState, action) => {
  if (action.type === 'ADD_DATA') {
    return { ...state, action.data }
  }
  return state
}
export default reducer

3. Store
Tugas Store adalah menggabungkan Action dan Reducer agar bisa bekerja sebagai state manajemen.
Store bertanggung jawab sebagai:

1. Menyimpan keseluruhan state.
2. Mengakses state dengan cara getState()
3. Menjalankan reducer untuk merubah state dengan cara dispatch(action).

import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store

kapan harus menggunakan redux?

1. Banyak data yang berubah dari waktu ke waktu
2. Pengelolaan state harus dilakukan di satu tempat (Single source of truth)
3. Mengelola state di top-level component sudah tidak lagi relevan

Redux memudahkan kita dalam memanajemen state. Pada saat aplikasi sudah bertumbuh besar, kita bisa dengan mudah mengubah state di child child component tanpa harus membuat bantuan dengan props di dalam component di dalam props component (nahlo bingung kan). Intinya kita bisa mengubah state dalam aplikasi meskipun dari component terjauh dari root component.