Mengenal React Redux dan React Native Elements

Pengantar

Pada pengembangan aplikasi React Native, sering muncul kebutuhan untuk:

• Mengelola data global yang digunakan di banyak komponen.
• Memiliki tampilan antarmuka yang rapi, konsisten, dan cepat dibuat.

Untuk itu, dua library yang sering digunakan adalah React Redux dan React Native Elements. Materi ini membahas dasar pemahaman kedua library tersebut serta contoh implementasinya.

React Redux

React Redux adalah library untuk mengelola state global pada aplikasi React dan React Native. Redux membantu mengatur data yang dibutuhkan oleh banyak komponen tanpa harus melakukan pengoperan props secara berantai.

Konsep Paling Penting dalam Redux

• Store – Tempat menyimpan seluruh state global aplikasi. Hanya terdapat satu store utama dalam aplikasi.

• Action – Objek JavaScript yang memberi tahu Redux jenis perubahan apa yang ingin dilakukan. Action memiliki properti type dan bisa memiliki payload.

  { "type": "ADD_ITEM", "payload": "Apel" }

• Reducer – Fungsi yang menentukan bagaimana state berubah berdasarkan action. Reducer harus bersifat pure function.

  function cartReducer(state = [], action) {
    switch (action.type) {
      case "ADD_ITEM":
        return [...state, action.payload];
      default:
        return state;
    }
  }

• dispatch – Fungsi untuk mengirim action ke store.

  dispatch({ type: "ADD_ITEM", payload: "Apel" });

• useSelector – Hook untuk membaca data dari store.

  const items = useSelector(state => state.cart);

Redux sangat berguna pada aplikasi yang memiliki banyak komponen dan membutuhkan konsistensi data pada seluruh bagian aplikasi.

React Native Elements

React Native Elements adalah UI library yang menyediakan berbagai komponen siap pakai untuk React Native.

Keuntungan Utama

• Tersedia banyak komponen seperti Button, Card, Input, Icon, Header, Avatar, ListItem, dan lainnya.
• Semua komponen sudah memiliki gaya default sehingga tampilan lebih seragam dan profesional tanpa membuat styling dari awal.
• Meskipun sudah memiliki gaya bawaan, setiap komponen tetap bisa diatur menggunakan props, style, dan theme.

Contoh Sederhana

import { Button } from "@rneui/themed";

React Native Elements menghemat waktu pengembangan dan membuat tampilan lebih modern tanpa banyak styling manual.

Integrasi React Redux pada React Native

Instalasi

npm install @reduxjs/toolkit react-redux

Disarankan menggunakan Redux Toolkit karena struktur kode lebih sederhana.

Membuat Store (misalnya redux/store.js)

import { configureStore } from "@reduxjs/toolkit";
import cartReducer from "./cartSlice";

export const store = configureStore({
  reducer: {
    cart: cartReducer
  }
});

Menambahkan Provider di App.js

import { Provider } from "react-redux";
import { store } from "./redux/store";

export default function App() {
  return (
    <Provider store={store}>
      {/* Komponen aplikasi lainnya */}
    </Provider>
  );
}

Provider memastikan seluruh komponen di aplikasi bisa mengakses state Redux.

Mengambil State

import { useSelector } from "react-redux";

const items = useSelector((state) => state.cart.items);

Mengubah State

import { useDispatch } from "react-redux";
import { addItem } from "../redux/cartSlice";

const dispatch = useDispatch();
dispatch(addItem("Jeruk"));

Dengan integrasi ini, React Redux membuat state global menjadi lebih stabil dan mudah dikelola.

Contoh Penggunaan React Native Elements di Aplikasi

Instalasi

npm install @rneui/themed @rneui/base

ProductCard.jsx

import { Card, Button, Text } from "@rneui/themed";

export default function ProductCard({ nama, harga }) {
  return (
    <Card>
      <Card.Title>{nama}</Card.Title>
      <Text>Harga: Rp {harga.toLocaleString()}</Text>
      <Button title="Beli" />
    </Card>
  );
}

Home.jsx

import { View } from "react-native";
import ProductCard from "./ProductCard";

export default function Home() {
  return (
    <View>
      <ProductCard nama="Produk A" harga={15000} />
      <ProductCard nama="Produk B" harga={25000} />
    </View>
  );
}

Dengan React Native Elements, tampilan terlihat rapi meskipun kode styling sangat sedikit.

Kesimpulan

Dalam pengembangan React Native, memahami cara mengelola state global dan membangun UI yang konsisten sangat penting. React Redux membantu menyelesaikan masalah state yang kompleks, sementara React Native Elements mempercepat proses membangun antarmuka aplikasi. Dengan menguasai keduanya, mahasiswa dapat membuat aplikasi yang lebih stabil, terstruktur, dan tampak profesional.