Panduan Pemula untuk ReactJS - Redux

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

Apa Itu Redux?

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

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

Konsep Inti Redux

Mari kitauraikan konsep utama Redux:

1. Store

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

2. Actions

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

3. Reducers

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

4. Dispatch

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

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

Menyiapkan Redux

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

npm install redux react-redux

Sekarang, mari kita buat sebuah 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;
}
};

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

Dalam contoh ini, kita membuat store dengan reducer penghitung sederhana. Reducer mendengarkan 'INCREMENT' dan 'DECREMENT' actions dan memperbarui keadaan 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 akan merespon.

Menggunakan Komponen Provider

Komponen Provider membuat store Redux tersedia bagi semua komponen bersarang yang perlu mengakses 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 />
</Provider>
);

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 sebuah 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 menggambar keadaan ke properti dalam komponen kita.
3. mapDispatchToProps memungkinkan kita menggambar creators action ke properti.
4. connect membungkus komponen kita, menyuntikkan keadaan dan creators action ke properti.

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 pengurangan
applyMiddleware(...middlewares)	Mengaplikasikan middleware ke metode dispatch store Redux
bindActionCreators(actionCreators, dispatch)	Mengubah objek yang nilainya creators action menjadi objek dengan same keys tetapi dengan setiap creators action dibungkus panggilan dispatch

Kesimpulan

Dan begitu saja! Kita telah meliputi dasar-dasar Redux, dari memahami konsep intinya hingga mengimplementasikannya di dalam aplikasi React. Ingat, Redux mungkin terlihat sedikit rumit pada awalnya, tapi itu seperti belajar menunggang sepeda - sekali Anda mendapatkannya, Anda akan berpikir bagaimana Anda bisa melakukan tanpanya!

Sebagai Anda terus melanjutkan perjalanannya, Anda akan menemukan fitur lanjut Redux, seperti middleware dan actions asinkron. Tetapi untuk sekarang, pukul dirimu sendiri - Anda telah mengambil langkah pertama ke dunia manajemen keadaan yang lebih besar!

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

Credits: Image by storyset