Redux: Wadah Keadaan yang Dapat Diprediksi untuk Aplikasi React

Dalam pengembangan web modern, mengelola state aplikasi secara efisien sangat penting untuk membangun aplikasi yang dapat diskalakan dan dipelihara. React, salah satu library JavaScript yang paling populer untuk membangun antarmuka pengguna, menyediakan arsitektur berbasis komponen di mana manajemen state dapat dengan cepat menjadi kompleks seiring dengan pertumbuhan aplikasi. Di sinilah Redux, wadah state yang dapat diprediksi untuk aplikasi JavaScript, berperan. Redux membantu mengelola state aplikasi secara terpusat, sehingga perubahan state dapat diprediksi dan lebih mudah untuk di-debug.

Apa yang dimaksud dengan Redux?

Redux adalah pustaka sumber terbuka yang ditulis dalam JavaScript yang digunakan untuk mengelola dan memusatkan status aplikasi. Redux dikembangkan oleh Dan Abramov dan Andrew Clark pada tahun 2015 dan didasarkan pada arsitektur Flux dari Facebook. Redux dibangun di atas beberapa prinsip inti:

1. Sumber Kebenaran Tunggal - Status aplikasi yang lengkap disimpan dalam satu objek yang disebut store.
2. State bersifat Read-Only - Satu-satunya cara untuk mengubah state adalah dengan mengirimkan aksi sehingga perubahan menjadi dapat dilacak.
3. Perubahan Dibuat Menggunakan Fungsi Murni - Reducer, yang merupakan fungsi murni, menangani pembaruan state berdasarkan tindakan yang diterima.

Prinsip-prinsip ini membantu menjaga aliran data yang dapat diprediksi, membuat aplikasi lebih mudah dipelihara dan diskalakan.

sumber: buildwithangga.com

Mengapa Menggunakan Redux?

Ketika aplikasi bertambah besar, akan sulit untuk melacak status bersama di banyak komponen. Redux memiliki banyak manfaat:

• Prediktabilitas: Perubahan state terjadi dengan cara yang terkontrol ketat dengan aksi dan reduksi, yang membuat debugging dan mereproduksi bug menjadi lebih mudah.
• Manajemen Status Pusat: semua status aplikasi disimpan dalam satu penyimpanan, sehingga pelacakan aliran data menjadi lebih mudah.
• Debugging yang Lebih Baik: Redux hadir dengan alat pengembang yang sangat baik termasuk debugging perjalanan waktu, yang memungkinkan pengembang untuk memeriksa status sebelumnya dan memutar ulang tindakan.
• Kemudahan Pengujian: Karena reduksi adalah fungsi murni, reduksi dapat dengan mudah diuji.
• Dukungan Middleware: Redux juga mendukung middleware seperti Redux Thunk, Redux Saga, dll. Middleware memungkinkan operasi asinkron seperti panggilan API.

Komponen Inti dari Redux

Untuk memahami cara kerja Redux, mari kita uraikan komponen-komponen utamanya:

1. Toko

Store adalah objek JavaScript yang berisi status aplikasi. Ini menjadi sumber kebenaran tunggal tentang aplikasi untuk semua komponennya.

import { createStore } from 'redux';

import rootReducer from './reducers';

const store = createStore(rootReducer);

2. Tindakan

Actions - yang merupakan objek JavaScript yang menjelaskan apa yang seharusnya berubah dalam state Actions diharuskan memiliki properti tipe dan secara opsional dapat menyertakan beberapa data muatan tambahan.

const ADD_TODO = 'ADD_TODO';

const addTodo = (text) => {

    return {

        type: ADD_TODO,

        payload: text

    };

};

3. Pengurang

Reducers adalah fungsi murni yang menjelaskan bagaimana state harus berubah sebagai respons terhadap aksi. Mereka menerima state dan aksi dan mengeluarkan state baru.

const initialState = { todos: [] };

const todoReducer = (state = initialState, action) => {

    switch (action.type) {

        case 'ADD_TODO':

            return {

                ...state,

                todos: [...state.todos, action.payload]

            };

        default:

            return state;

    }

};

4. Mengirimkan Tindakan

Anda mengirimkan aksi dengan fungsi pengiriman yang diberikan oleh toko. 

store.dispatch(addTodo('Learn Redux'));

Mengintegrasikan Redux dengan React

Menghubungkan Store dengan Komponen di Aplikasi ReduxReact †. Komponen Provider dan fungsi connect disediakan oleh pustaka react-redux untuk mencapai koneksi ini.

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import { createStore } from 'redux';

import todoReducer from './reducers';

import App from './App';

const store = createStore(todoReducer);

ReactDOM.render(

    <Provider store={store}>

        <App />

    </Provider>,

    document.getElementById('root')

);

Dengan membungkus komponen App dengan Provider, kita dapat memberikan semua komponen yang bersarang akses ke redux store.

Menggunakan Redux Hooks

Redux biasanya menggunakan fungsi connect untuk melakukan hal ini, namun dengan diperkenalkannya hook oleh React, Redux sekarang memiliki hook useSelector dan useDispatch untuk mengelola state tanpa menggunakan fungsi connect. 

import { useSelector, useDispatch } from 'react-redux';

const TodoList = () => {

    const todos = useSelector(state => state.todos);

    const dispatch = useDispatch();

    return (

        <div>

            <ul>

                {todos.map((todo, index) => (

                    <li key={index}>{todo}</li>

                ))}

            </ul>

            <button onClick={() => dispatch(addTodo('New Task'))}>Add Task</button>

        </div>

    );

};

Kesimpulan

Redux adalah sebuah library manajemen state yang kuat yang menyediakan cara yang dapat diprediksi untuk mengelola state aplikasi dalam aplikasi React. Dengan memberlakukan aliran data searah dan memusatkan manajemen state, Redux menyederhanakan debugging, pengujian, dan penskalaan aplikasi. Meskipun Redux mungkin tidak diperlukan untuk proyek-proyek kecil, Redux sangat bermanfaat untuk aplikasi berskala besar dengan interaksi state yang kompleks. Sebagai alternatif, pengembang juga dapat mempertimbangkan Context API bawaan React untuk kebutuhan manajemen state yang lebih sederhana. 

Kembali ke>>>> Memahami Manajemen State dalam Aplikasi React

Share :