ReactJS - Redux: Panduan untuk Pemula

Halo sana, calon pengembang! Saya sangat senang menjadi panduanmu dalam perjalanan menarik ke dunia ReactJS dan Redux. Sebagai seseorang yang telah mengajar ilmu komputer selama tahun tahun, saya telah melihat banyak siswa yang terangsang saat akhirnya mereka memahami konsep ini. Jadi, mari kita masuk dan buat sesuatu yang menakjubkan!

Apa Itu Redux?

Sebelum kita masuk ke kode, mari kita pahami apa itu Redux. Gamalkan bahwa Anda mengatur sebuah pesta besar (itu adalah aplikasimu), dan Anda perlu mengatur semua tamu, makanan, dan musik (itu adalah state aplikasimu). Redux adalah seperti planner pesta yang sangat efisien yang menjaga semua hal dalam satu tempat sentral.

Redux adalah pustaka manajemen state yang membantu Anda mengelola data dalam aplikasi React Anda lebih efektif. Ini sangat berguna untuk aplikasi yang lebih besar di mana pengiriman data antar komponen dapat menjadi rumit.

Konsep Utama Redux

Mari kitauraikan konsep utama Redux:

1. Store

Store adalah seperti sebuah wadah besar yang menyimpan semua state aplikasimu. Itu adalah sumber kebenaran tunggal untuk data aplikasimu.

2. Actions

Actions adalah seperti pesan yang memberitahu store apa yang terjadi dalam aplikasimu. Mereka adalah objek JavaScript biasa yang harus memiliki properti type.

3. Reducers

Reducers adalah fungsi yang menentukan bagaimana state aplikasi berubah dalam tanggapan terhadap actions. Mereka menerima state saat ini dan action sebagai argumen dan mengembalikan state baru.

4. Dispatch

Dispatch adalah metode yang mengirim actions ke store untuk memperbarui state.

Sekarang, mari kita lihat konsep ini dalam tindakan dengan beberapa contoh kode!

Menyiapkan Redux

Pertama-tama, kita perlu menginstal Redux dan React-Redux:

npm install redux react-redux

Sekarang, mari kita buat aplikasi penghitung sederhana untuk menunjukkan bagaimana Redux bekerja.

Membuat Store

import { createStore } from 'redux';

// Ini adalah reducer kami
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
};

// Buat store
const store = createStore(counterReducer);

Dalam contoh ini, kita membuat store dengan reducer penghitung sederhana. Reducer ini mendengarkan 'INCREMENT' dan 'DECREMENT' actions dan memperbarui state sesuai nya.

Mendefinisikan Actions

// Creators action
const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

Ini adalah creators action kami. Mereka mengembalikan objek action yang reducer kami akan merespon.

Menggunakan Komponen Provider

Komponen Provider membuat store Redux tersedia bagi semua komponen yang bersarang dan memerlukan akses ke store Redux.

import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import counterReducer from './reducers';
import App from './App';

const store = createStore(counterReducer);

const Root = () => (
<Provider store={store}>
<App />
</App>
);

export default Root;

Kode ini membungkus komponen utama App kita dengan Provider, memberikan semua komponen akses ke store.

Menghubungkan Komponen ke Redux

Sekarang, mari kita buat komponen Counter yang menggunakan store Redux kami:

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

const Counter = ({ count, increment, decrement }) => (
<div>
<h2>Hitung: {count}</h2>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);

const mapStateToProps = (state) => ({
count: state,
});

const mapDispatchToProps = {
increment,
decrement,
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

mari kitauraikan ini:

1. Kita import connect dari react-redux, yang memungkinkan kita menghubungkan komponen kita ke store Redux.
2. mapStateToProps memberitahu Redux bagaimana untuk memetakan state ke props dalam komponen kita.
3. mapDispatchToProps memungkinkan kita memetakan creators action ke props.
4. connect membungkus komponen kita, menyuntikkan state dan action creators ke props.

Metode API Redux

Berikut adalah tabel dari beberapa metode API Redux yang penting:

Metode	Deskripsi
createStore(reducer, [preloadedState], [enhancer])	Membuat store Redux
combineReducers(reducers)	Menggabungkan beberapa reducer menjadi satu fungsi reducing
applyMiddleware(...middlewares)	Mengaplikasikan middleware ke metode dispatch store Redux
bindActionCreators(actionCreators, dispatch)	Mengubah objek yang nilainya action creators menjadi objek dengan same keys tapi dengan setiap action creator diwrapping oleh panggilan dispatch

Kesimpulan

Dan itu adalah! Kita telah menutupi dasar-dasar Redux, dari memahami konsep utamanya sampai mengimplentasikannya dalam aplikasi React. Ingat, Redux mungkin terlihat sedikit kompleks pada awalnya, tapi itu seperti belajar menunggang sepeda - sekali Anda mendapatkannya, Anda akan berpikir bagaimana Anda pernah menangani tanpanya!

Sekarang, Anda akan menemukan fitur yang lebih lanjut dari Redux, seperti middleware dan aksi asinkron. Tetapi untuk sekarang, pukul dirimu sendiri - Anda telah mengambil langkah pertama ke dunia manajemen state yang lebih besar!

Terus coding, terus belajar, dan terutama, terus bersenang-senang! Sampai jumpa lagi, selamat Redux-ing!

Credits: Image by storyset