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.
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:
- Store: Tempat penyimpanan state global aplikasi.
- Actions: Objek yang mengirimkan informasi tentang perubahan yang terjadi pada state.
- 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.
- Buat Proyek React Baru:
npx create-react-app my-redux-app cd my-redux-app
- 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.
- Buat File Store:
Buat folder baru bernamaredux
di dalam foldersrc
. Kemudian buat filestore.js
di dalam folderredux
:// src/redux/store.js import { createStore } from 'redux'; import rootReducer from './reducers'; const store = createStore(rootReducer); export default store;
- Buat Reducer:
Reducer adalah fungsi yang menangani perubahan state. Kita akan membuat folderreducers
di dalam folderredux
, kemudian buat filecounterReducer.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;
- Buat Root Reducer:
Jika kamu memiliki beberapa reducer, kamu bisa menggabungkannya menjadi satu dengan menggunakancombineReducers
.// 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.
- Provider:
Untuk membuat store tersedia di seluruh aplikasi React, kita menggunakanProvider
darireact-redux
. Buka filesrc/index.js
dan bungkus aplikasi denganProvider
:// 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.
- Mengambil State dari Redux:
Gunakan hookuseSelector
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;
- Dispatching Actions:
Ketika tombol di-click, action seperti'INCREMENT'
atau'DECREMENT'
dikirim ke reducer menggunakandispatch
. Fungsidispatch
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