Tutorial Redux (2021)

Belajar konsep Redux untuk pemula.

Redux adalah state container untuk aplikasi JavaScript.

Meskipun pada umumnya Redux digunakan bersama dengan React, tapi pada dasarnya Redux juga bisa digunakan untuk framework JavaScript yang lain.

Mengapa Redux?

Mengatur hubungan antara state dengan component pada React dapat dilakukan dengan hanya menggunakan state dan props. Tetapi pada aplikasi React yang memilliki banyak sekali component, mengelola state bisa menjadi sedikit rumit.

Sebuah state bisa digunakan oleh banyak component, seringkali state harus dipindah ke parent component (lifting up) agar state tersebut dapat digunakan oleh component lain, karena state sendiri bersifat internal atau private.

Dengan Redux kita tidak perlu lagi memindahkan state dari satu component ke component lain, karena Redux mengubah state menjadi global state dan menempatkannya pada suatu tempat bernama store.

Jadi setiap component dapat menggunakan state yang ada di store secara langsung.

Modifikasi state juga dilakukan melalui Redux, store pada Redux menjadi satu-satunya tempat untuk mengelola state(single source of truth).

Aplikasi menjadi lebih konsisten dan mudah untuk ditest.

Haruskah menggunakan redux?

Jawabannya tidak harus, meskipun pengelolaan state sudah dilakukan di satu tempat bukan berarti pekerjaan mengelola state menjadi lebih mudah.

Redux sendiri menggunakan pattern yang kompleks dan butuh waktu untuk memahami dan menguasainya.

Selain itu, mengubah state menggunakan Redux harus melewati beberapa proses, hal ini bisa menyebabkan tingkat kerumitan dari aplikasi menjadi bertambah.

Lalu kapan harus menggunakan redux?

Sesuai rekomendasi dari Redux, gunakan Redux jika:

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

Intinya jika tanpa Redux tidak ada masalah, maka tidak perlu gunakan Redux

Konsep Dasar

Istilah

Berikut istilah-istilah penting yang digunakan di dalam Redux:

Actions

Sebuah JavaScript Object yang mewakili apa yang terjadi di dalam aplikasi.

Contoh:

const addNameAction = {
 type: 'name',
 payload: 'brachio'
}

Reducers

Function yang menerima object state dan object action, bertugas menentukan bagaimana suatu state diubah. Output reducer adalah state baru.

Syntax: (state, action) => newState

Store

Tempat dimana global state disimpan.

Dispatch

Satu-satunya cara untuk mengubah state di dalam store adalah dengan memanggil method bernama dispatch yang berisi action, kemudian Redux akan mengeksekusi reducer yang sesuai.

Selector

Function yang digunakan untuk mendapatkan data dari state yang ada di dalam store.

3 Konsep dasar

Single Source of Truth

Redux menggunakan store sebagai single source of truth, dimana semua global state disimpan dalam bentuk object di dalam store.

State is Read Only

Untuk menghindari data diubah tanpa sengaja atau terhapus, state hanya bisa diubah dengan cara dispatch suatu action.

Changes are Made with Pure Reducer Function

State diubah menggunakan pure function (Reducer), yaitu function menerima state sebelumnya dan sebuah action, kemudian menghasilkan state baru tanpa menghapus state sebelumnya.

Workflow

Berikut adalah alur atau workflow sederhana dari contoh aplikasi yang menggunakan Redux.

Sumber

Penjelasan:

Ketika button Deposit $10 diklik, sebuah click event bernama deposit akan ditangkap oleh event handler.

Event handler memanggil function dispatch dan meneruskan sebuah action dengan type: deposit dan payload: 10. Payload adalah value yang ada di dalam action.

Kemudian store akan mengeksekusi function reducer yang sesuai dengan action yang diteruskan.

Reducer akan mengubah state dari $0 ke $10 untuk kemudian ditampilkan di sisi UI.

Untuk lebih jelasnya kita akan membuat sebuah React App + Redux yang memiliki workflow yang sama dengan workflow diatas.

Step by step

Kita akan buat sebuah aplikasi counter sederhana dimana user dapat menambahkan deposit dan menarik deposit seperti aplikasi pada mesin ATM.

Aplikasi ini terdiri dari dua bagian yaitu input dan output.

Input berupa dua button Deposit $10 dan Withdraw $10 sedangkan output adalah tampilan dari total deposit yang tersisa.

Tampilan akhir:

Tool yang perlu disiapkan:

• Visual Studio Code
• Terminal
• Package Manager npm/yarn

Selain ketiga tools diatas kita akan gunakan Redux Toolkit.

Redux Toolkit adalah official tool yang disediakan oleh team Redux untuk mempermudah kita jika ingin menggunakan Redux pada suatu aplikasi.

Redux juga menyediakan official template untuk Create React App yang langsung bisa kita gunakan. Tapi untuk dapat menjelaskan konsep dasar Redux pada tutorial ini kita akan gunakan Create React App dan akan mengkonfigurasi Redux dari awal.

Install Create React App.

npx create-react-app my-app

my-app adalah nama dari aplikasi, kita bisa ganti sesuai keinginan.

Pindah ke folder my-app kemudian jalankan perintah berikut untuk install Redux toolkit.

# NPM
npm install @reduxjs/toolkit
# Yarn
yarn add @reduxjs/toolkit

Jalankan VS Code kemudian buka folder my-app.

Lewat integrated terminal eksekusi perintah berikut untuk menjalankan aplikasi.

yarn start

Membuat Slice

Langkah pertama yang kita lakukan adalah membuat sebuah Redux ‘slice’ yang berisikan data total saldo yang sudah dideposit oleh user.

Di dalam folder src buat sebuah folder features dan subfolder balance, kemudian sebuah file dengan nama balanceSlice.js.

|-node_modules
|-public
|-src
  |-features
    |-balance
      |-balanceSlice.js

Salin code berikut ini:

import { createSlice } from "@reduxjs/toolkit";
const initialState = { total: 0 };
const balanceSlice = createSlice({
 name: 'balance',
 initialState,
 reducers: {}
});
export default balanceSlice.reducer;

Pada code diatas kita gunakan function createSlice dari Redux toolkit yang berfungsi untuk membuat function reducer.

Yang harus ditambahkan ke dalam function createSlice adalah nama dari slice, state awal (initialState) dan reducer.

Membuat Store

Selanjutnya kita buat store dan tambahkan slice yang sudah dibuat ke dalam store.

Buat sebuah file dengan nama store.js di root folder, kemudian salin code berikut:

my-app/store.js

import { configureStore } from '@reduxjs/toolkit';
import balanceReducer from '../features/balance/balanceSlice';
export default configureStore({
  reducer: {
    balance: balanceReducer
  }
});

Dengan code diatas kita ingin Redux menambahkan field bernama balances ke dalam global state, dimana data yang disimpan didalamnya hanya bisa diupdate menggunakan balancesReducer.

Tampilkan Balances

Kita buat sebuah component untuk menampilkan balances di dalam halaman utama.

Buat file bernama balances.js di dalam folder features/balances.

Letak component tidak harus di dalam folder features, kita bebas memilih.

Sebagai contoh kita bisa tempatkan semua component didalam folder khusus dengan nama components.

React component dapat dengan mudah memakai data dari store dengan bantuan React hook useSelector yang ada di package react-redux.

Package ini juga merupakan official tool dari Redux untuk mempermudah integrasi antara React dengan Redux.

Tambahkan package react-redux:

yarn add react-redux

Agar React dapat menggunakan semua data yang ada di dalam store, maka kita perlu menempatkan App component di dalam react-redux Provider.

Update src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

Kemudian salin code berikut ini:

src/features/balance/balance.js

import React from 'react'
import { useSelector } from 'react-redux'
const Balance = () => {
const balance = useSelector(state => state.balance)
return (
    <section>
      <h2>Total Saldo</h2>
      <p>{balance.total}</p>
    </section>
  )
}
export default Balance;

Tampilkan component Balance ke halaman utama:

src/App.js

import logo from './logo.svg';
import './App.css';
import Balance from './features/balance/balance';
function App() {
  return (
    <div className="App">
      <img src={logo} className="App-logo" alt="logo" />
      <Balance />
    </div>
  );
}
export default App;

Jika tidak ada kendala, hasilnya adalah seperti ini:

Tambahkan Button untuk deposit

Tambahkan Button yang berfungsi untuk deposit (menambah saldo )dan withdraw (mengurangi saldo).

Update component Balance src/features/balance/balance.js:

import React from 'react'
import { useSelector } from 'react-redux'
const Balance = () => {
  const balance = useSelector(state => state.balance)
return (
    <>
    <section>
      <h2>Total Saldo</h2>
      <p>$ {balance.total}</p>
    </section>
    <section>
      <button type="button">Deposit $10</button>
      <button type="button">Withdraw $10</button>
    </section>
    </>
  )
}
export default Balance;

(Optional) Update css untuk element button src/App.css:

button {
  margin: 0.5rem;
}

Update Total Saldo

Total saldo akan diperbaharui setiap user melakukan deposit atau withdraw.

Untuk itu kita perlu buat reducer untuk setiap action.

import { createSlice } from '@reduxjs/toolkit';
const initialState = { total: 0 };
const balanceSlice = createSlice({
  name: 'balance',
  initialState,
  reducers: {
    deposit(state, action) {
      return {
        ...state,
        total: state.total + action.payload,
      };
    },
    withdraw(state, action) {
      return {
        ...state,
        total: state.total - action.payload,
      };
    },
  },
});
export const { deposit, withdraw } = balanceSlice.actions;
export default balanceSlice.reducer;

Yang perlu diingat disini adalah reducer melakukan immutable update (ingat State is read-only), dimana state lama tidak diupdate secara langsung tapi diupdate dengan cara membuat state yang baru.

Pada code diatas kita menggunakan spread operator (…) untuk melakukan copy & update object sekaligus.

Langkah terakhir adalah menambahkan function dispatch yang akan meneruskan action dari component ke store.

Update src/features/balance/balance.js :

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { deposit, withdraw } from './balanceSlice';
const Balance = () => {
const balance = useSelector(state => state.balance);
  const dispatch = useDispatch();
const handleDeposit = () => {
    dispatch(
      deposit(10)
    )
  };
const handleWithdraw = () => {
    dispatch(
      withdraw(10)
    )
  };
return (
    <>
    <section>
      <h2>Total Saldo</h2>
      <p>$ {balance.total}</p>
    </section>
    <section>
      <button type="button" 
       onClick={handleDeposit}>Deposit $10</button>
      <button type="button" 
       onClick={handleWithdraw}>Withdraw $10</button>
    </section>
    </>
  )
}
export default Balance;

Yang terjadi pada code diatas:

Setiap kali user click button Deposit $10 maka event handler handleDeposit akan mengeksekusi function dispatch dengan action deposit(10).

Kemudian redux akan mengeksekusi function reducer yang ada di dalam store yang sesuai dengan action yang diteruskan oleh function dispatch.

Dalam hal ini action deposit akan menambah total balance sebesar $10 secara akumulatif.

Total balance akan terus bertambah dengan kelipatan $10 sesuai jumlah deposit yang dilakukan oleh user.

Sebaliknya jika user click button Withdraw $10 maka event handler handleWithdraw akan mengeksekusi function dispatch dengan action withdraw(10).

Kemudian redux akan mengeksekusi function reducer yang ada di dalam store yang sesuai dengan action yang diteruskan oleh function dispatch.

Dalam hal ini adalah function reducer withdraw yang akan mengurangi total balance sebesar $10 setiap kali user melakukan withdraw.

Repository aplikasi ini bisa dilihat di Github.

TL;DR

• Redux adalah state container untuk aplikasi JavaScript
• Redux mengubah state menjadi global state dan menempatkannya pada suatu tempat bernama store
• store pada Redux menjadi satu-satunya tempat untuk mengelola state(single source of truth)
• Gunakan Redux jika memang diperlukan
• Istilah yang harus dipahami dalam Redux adalah action, reducer, store, dispatch, selector
• 3 konsep dasar dalam Redux adalah Single Source of Truth, State is Read Only, Changes are Made with Pure Reducer Function

Semoga tutorial singkat ini bermanfaat bagi kamu yang ingin menggunakan Redux atau sekedar ingin tahu konsep dasar Redux.

Terima Kasih dan jangan lupa clap 👏

Download full chapter eBook Full Stack Gate, kumpulan materi pendahuluan untuk memulai karir sebagai Full Stack Web Developer disini.