Mengenal React Redux

1. Apa Itu Redux?

Redux adalah tempat menyimpan data aplikasi secara global.
Jika aplikasi Anda hanya memiliki 1 atau 2 komponen, maka state biasa (useState) sudah cukup.
Tetapi dalam aplikasi besar, banyak komponen membutuhkan data yang sama, misalnya:

• data user login
• keranjang belanja
• notifikasi
• tema aplikasi
• status online/offline

Redux membantu mengelola data global ini dengan rapi, konsisten, dan mudah dipakai di banyak halaman.

---

2. Mengapa Redux Diperlukan?

Contoh masalah tanpa Redux:

• Anda punya screen Home.
• Anda punya screen Cart.
• Anda punya ProductCard yang tersebar di banyak tempat.

Jika user menambah barang ke keranjang di Home, bagaimana Cart tahu bahwa barang sudah bertambah?

Tanpa Redux, Anda akan melakukan "oper-oper props" yang panjang (props drilling).
Itu membuat aplikasi sulit dipelihara.

Dengan Redux:

• Data disimpan di satu tempat (store)
• Semua screen bisa membaca dan mengubah data tersebut
• Tidak ada props drilling

---

3. Cara Kerja Redux

Redux memiliki 4 konsep dasar:

1. Store
   Tempat menyimpan seluruh data global aplikasi.

2. Action
   Perintah yang dikirim untuk mengubah state. Contoh: ADD_ITEM, REMOVE_ITEM.

3. Reducer
   Fungsi yang memutuskan bagaimana state berubah ketika action dikirim.

4. Dispatch
   Cara kita memanggil action ke reducer.

Skema sederhananya:

Komponen → dispatch(action) → reducer → store → komponen otomatis terupdate

---

4. Instalasi Redux Toolkit

Redux modern memakai Redux Toolkit karena lebih mudah dipakai.

Jalankan:

npm install @reduxjs/toolkit react-redux

React Redux menghubungkan Redux dengan React Native.

---

5. Studi Kasus: Aplikasi Keranjang Belanja Sederhana

Pada studi kasus ini kita membuat aplikasi yang memiliki dua halaman:

1. HomeScreen
   Menampilkan daftar produk + tombol tambah ke keranjang.

2. Cart
   Menampilkan semua item dalam keranjang.

Navigasi antar halaman memakai React Navigation.

---

6. Struktur Folder Lengkap

Gunakan struktur berikut:

app/
 ├── App.jsx
 ├── MainApp.jsx
 ├── screens/
 │     ├── HomeScreen.jsx
 │     └── Cart.jsx
 ├── redux/
 │     ├── store.js
 │     └── cartSlice.js

---

7. Implementasi

---

File 1: App.jsx

Membungkus aplikasi dengan Provider agar Redux bisa digunakan di seluruh halaman.

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

export default function App() {
  return (
    <Provider store={store}>
      <MainApp />
    </Provider>
  );
}

---

File 2: MainApp.jsx

Mengatur navigasi HomeScreen dan Cart menggunakan React Navigation.

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import HomeScreen from "./screens/HomeScreen";
import Cart from "./screens/Cart";

const Stack = createStackNavigator();

export default function MainApp() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: "Daftar Produk" }} />
        <Stack.Screen name="Cart" component={Cart} options={{ title: "Keranjang Belanja" }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

---

File 3: redux/store.js

Store Redux yang berisi seluruh state global.

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

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

---

File 4: redux/cartSlice.js

Mengelola data keranjang: menambah dan menghapus item.

import { createSlice } from "@reduxjs/toolkit";

const cartSlice = createSlice({
  name: "cart",
  initialState: {
    items: []
  },
  reducers: {
    addItem: (state, action) => {
      state.items.push(action.payload);
    },
    removeItem: (state, action) => {
      state.items = state.items.filter(item => item !== action.payload);
    }
  }
});

export const { addItem, removeItem } = cartSlice.actions;
export default cartSlice.reducer;

---

File 5: screens/HomeScreen.jsx

Halaman utama, menampilkan produk dan tombol tambah ke Redux state.

import React from "react";
import { View, Text, Button } from "react-native";
import { useDispatch } from "react-redux";
import { addItem } from "../redux/cartSlice";

export default function HomeScreen({ navigation }) {
  const dispatch = useDispatch();

  const products = ["Headphone", "Handphone"];

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 22, marginBottom: 10 }}>Daftar Produk</Text>

      {products.map((p) => (
        <View key={p} style={{ marginBottom: 12 }}>
          <Text>{p}</Text>
          <Button
            title="Tambah ke Keranjang"
            onPress={() => dispatch(addItem(p))}
          />
        </View>
      ))}

      <Button
        title="Lihat Keranjang"
        onPress={() => navigation.navigate("Cart")}
      />
    </View>
  );
}

---

File 6: screens/Cart.jsx

Menampilkan isi keranjang yang disimpan di Redux.

import React from "react";
import { View, Text, Button } from "react-native";
import { useSelector, useDispatch } from "react-redux";
import { removeItem } from "../redux/cartSlice";

export default function Cart() {
  const items = useSelector((state) => state.cart.items);
  const dispatch = useDispatch();

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 22, marginBottom: 10 }}>Keranjang Belanja</Text>

      {items.length === 0 ? (
        <Text>Keranjang masih kosong</Text>
      ) : (
        items.map((item, index) => (
          <View key={index} style={{ marginBottom: 8 }}>
            <Text>{item}</Text>
            <Button
              title="Hapus"
              onPress={() => dispatch(removeItem(item))}
            />
          </View>
        ))
      )}
    </View>
  );
}

---

8. Penjelasan Alur Kerjanya

1. User berada di HomeScreen.
2. User menekan tombol “Tambah ke Keranjang”.
3. HomeScreen memanggil: dispatch(addItem("Headphone"))
4. Redux memasukkan item ke state global cart.items.
5. Ketika membuka halaman Cart: useSelector(state => state.cart.items) otomatis mengambil isi keranjang dari Redux.
6. Halaman Cart langsung menampilkan isi keranjang tanpa props.

Ini menunjukkan bagaimana Redux membuat data bisa dipakai banyak halaman secara konsisten.

---

9. Menjalankan Proyek

Instal semua dependency:

npm install @reduxjs/toolkit react-redux
npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-screens react-native-safe-area-context

Jika memakai Expo:

expo install react-native-screens react-native-safe-area-context