Public Article

Cara Membuat Aplikasi dengan Redux: Panduan Lengkap untuk Pemula

Redux adalah sebuah pustaka JavaScript yang digunakan untuk mengelola state dalam aplikasi web, terutama aplikasi yang kompleks. Redux bekerja sangat baik dengan pustaka lain seperti React dan Angular, tetapi juga dapat digunakan bersama pustaka JavaScript lainnya. Redux mengelola state aplikasi dengan cara yang terstruktur dan dapat diprediksi, sehingga memudahkan pengembangan aplikasi dengan banyak data yang perlu dikelola.

Jika kamu ingin membuat aplikasi menggunakan Redux, artikel ini akan memberikan panduan lengkap mulai dari pengaturan dasar hingga cara mengintegrasikan Redux dengan aplikasi React.

baca juga Tingkatkan Kuat Tekan Beton, Mahasiswa Teknik Sipil Universitas Teknokrat Teliti Pengaruh Serat Bambu sebagai Bahan Tambah Alami

Apa Itu Redux?

Redux adalah pustaka manajemen state yang memungkinkan kamu untuk mengelola state aplikasi secara terpusat dalam sebuah store. Dengan Redux, semua state disimpan dalam satu objek global yang disebut store, dan perubahan pada state tersebut dilakukan dengan actions dan reducers. Ini membuat alur data menjadi lebih terstruktur dan mudah dipelihara.

Ada tiga konsep utama dalam Redux:

  1. Store: Tempat penyimpanan state global aplikasi.
  2. Actions: Objek yang mengirimkan informasi tentang perubahan yang terjadi pada state.
  3. Reducers: Fungsi yang menangani perubahan state berdasarkan action yang diterima.

Langkah-langkah Membuat Aplikasi dengan Redux

1. Menyiapkan Proyek React dan Redux

Untuk memulai, kita akan menggunakan React untuk tampilan antarmuka dan Redux untuk manajemen state. Jika belum menginstal React, kamu bisa memulainya dengan Create React App.

  1. Buat Proyek React Baru: npx create-react-app my-redux-app cd my-redux-app
  2. Instal Redux dan React-Redux:
    Setelah proyek selesai, kamu perlu menginstal Redux dan React-Redux (untuk menghubungkan Redux dengan React). npm install redux react-redux

2. Menyiapkan Store Redux

Redux membutuhkan sebuah store yang berfungsi untuk menyimpan state aplikasi. Di dalam store ini, kamu bisa mendefinisikan bagaimana state aplikasi berubah.

  1. Buat File Store:
    Buat folder baru bernama redux di dalam folder src. Kemudian buat file store.js di dalam folder redux: // src/redux/store.js import { createStore } from 'redux'; import rootReducer from './reducers'; const store = createStore(rootReducer); export default store;
  2. Buat Reducer:
    Reducer adalah fungsi yang menangani perubahan state. Kita akan membuat folder reducers di dalam folder redux, kemudian buat file counterReducer.js untuk menangani state counter. // src/redux/reducers/counterReducer.js const initialState = { count: 0 }; function counterReducer(state = initialState, action) { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; default: return state; } } export default counterReducer;
  3. Buat Root Reducer:
    Jika kamu memiliki beberapa reducer, kamu bisa menggabungkannya menjadi satu dengan menggunakan combineReducers. // src/redux/reducers/index.js import { combineReducers } from 'redux'; import counterReducer from './counterReducer'; const rootReducer = combineReducers({ counter: counterReducer }); export default rootReducer;

3. Menyambungkan Redux ke React

Setelah store dan reducer disiapkan, kita perlu menghubungkan store Redux ke aplikasi React.

  1. Provider:
    Untuk membuat store tersedia di seluruh aplikasi React, kita menggunakan Provider dari react-redux. Buka file src/index.js dan bungkus aplikasi dengan Provider: // src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { Provider } from 'react-redux'; import store from './redux/store'; ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') );

4. Menggunakan State dari Redux di React

Sekarang, kita akan membuat komponen yang terhubung ke Redux untuk mengakses dan mengubah state.

  1. Mengambil State dari Redux:
    Gunakan hook useSelector untuk mengambil state dari store. // src/App.js import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; function App() { // Mengambil count dari state global Redux const count = useSelector((state) => state.counter.count); // Membuat dispatch untuk mengirimkan action ke store const dispatch = useDispatch(); return ( <div className="App"> <h1>Counter: {count}</h1> <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button> <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button> </div> ); } export default App;
  2. Dispatching Actions:
    Ketika tombol di-click, action seperti 'INCREMENT' atau 'DECREMENT' dikirim ke reducer menggunakan dispatch. Fungsi dispatch ini memungkinkan kamu untuk memberi tahu Redux untuk mengubah state.

5. Mengubah State dan Melihat Perubahannya

Sekarang, jika kamu menjalankan aplikasi menggunakan perintah npm start, kamu dapat melihat aplikasi React dengan counter yang dapat ditingkatkan dan dikurangi menggunakan tombol. Setiap perubahan pada tombol akan merubah state count di Redux store dan memperbarui tampilan aplikasi.

baca juga Bagaimana Teknologi Modern Mengoptimalkan Pengelolaan Perpustakaan?

Apa Itu Actions dan Bagaimana Menggunakannya?

Pada contoh di atas, kita menggunakan objek sederhana untuk mendefinisikan action ({ type: 'INCREMENT' }). Namun, lebih baik untuk membuat action creators, yaitu fungsi yang menghasilkan action. Hal ini membantu menjaga konsistensi dalam aplikasi yang lebih besar.

Misalnya, buat file actions.js di dalam folder redux:

// src/redux/actions.js
export const increment = () => {
  return {
    type: 'INCREMENT'
  };
};

export const decrement = () => {
  return {
    type: 'DECREMENT'
  };
};

Kemudian, di komponen App.js, kamu bisa mengganti dispatch action langsung dengan action creators:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './redux/actions';

function App() {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  return (
    <div className="App">
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default App;

Kesimpulan

Dengan mengikuti langkah-langkah di atas, kamu sudah bisa membuat aplikasi menggunakan Redux untuk mengelola state secara terpusat dalam aplikasi React. Redux membantu menjaga alur data yang lebih terstruktur dan memudahkan pengelolaan state dalam aplikasi besar.

  • Store: Menyimpan semua state aplikasi.
  • Actions: Mendefinisikan perubahan yang ingin dilakukan pada state.
  • Reducers: Menangani perubahan state berdasarkan actions yang dikirim.

Redux adalah alat yang sangat berguna dalam mengelola state aplikasi besar dan kompleks. Setelah kamu menguasai dasar-dasar Redux, kamu dapat menambahkannya ke aplikasi yang lebih canggih dengan lebih banyak fitur, seperti middleware untuk menangani side effects, pengelolaan state async, dan pengoptimalkan aplikasi agar lebih scalable. Selamat mencoba!

Penulis : tanjali Mulia nafisa

Leave a Reply

Your email address will not be published. Required fields are marked *