Belajar state mangement React dengan Redux

Aplikasi react kamu semakin besar? mengatur state untuk dikonsumsi antar komponen semakin sulit? tenang, ada reduxjs datang membantu! dengan redux, mengolah state akan menjadi lebih jelas dengan fungsi tambahan seperti middleware dan juga dev tools yang memudahkan development kamu

Update kelas terakhir : 6 tahun yang lalu

cover belajar-state-mangement-react-dengan-redux.jpg

berkenalan dengan redux

Redux adalah salah satu state management yang sangat populer digunakan di reactjs. Tapi redux sebenarnya tidak tergantung dengan reactjs itu sendiri. Dengan redux kita akan punya state yang bisa dishare di seluruh aplikasi, menggunakan middleware dan masih banyak lagi

tiga prinsip utama redux

Ada tiga prinsip utama redux. Satu, state adalah single-source-of-truth atau semua data state yang ingin dishare hanya ada dan bersumber dari state. Dua, state tidak bisa diubah begitu saja, kita perlu menggunakan bantuan action untuk memanipulasi state. Tiga, manipulasi state dibuat dengan pure function, sebuah fungsi yang melakukan tugas tanpa efek samping

contoh aplikasi redux

Kita akan melihat contoh aplikasi redux sederhana dengan memanggil package redux melalui CDN tanpa reactjs

membuat fungsi createstore sendiri

yuk belajar cara membuat fungsi createstore sendiri, ternyata istilah-istilah yang kita dengar sebelumnya tidak begitu mengerikan, fungsi createstore di redux sebenarnya cukup sederhana dari sisi javascript

package react redux

Untuk mulai menggunakan redux di aplikasi reactjs kamu, kita akan menginstall package react-redux, package resmi untuk memudahkan kita berinteraksi antar komponen dengan redux pada reactjs

menyiapkan aplikasi todo

Kita siapkan aplikasi todo list (daftar tugas) yang akan kita buat dengan reactjs dan redux sebagai state menagementnya

komponen form dan fungsi connect

Mulai dari yang sederhana yaitu membuat komponen form untuk menambahkan tugas dan mengenalkan fungsi connect dari react-redux yang berguna untuk menghubungkan komponen dan fungsi pada redux

action dan reducer untuk addtodo

Sudah pernah mendengar action dan reducer di redux? okay, sekarang kita gunakan untuk menambahkan daftar tugas alias fungsi addtodo pada aplikasi ini

memanggil data store redux dengan mapStateToProps

memanggil data dari store redux pada reactjs dan menghubungkannya ke komponen bisa kita lakukan dengan bantuan mapStateToProps dari package react-redux

memisahkan komponen todo

Kita bisa memisahkan komponen todo agar lebih rapi seperti di reactjs biasa, sehingga komponen utama kita bisa tetap dibaca dengan mudah

refactor todos

Sepertinya komponen todos kita bisa dibuat lebih rapi, kita akan melakukan refactor todos dengan mengubah kelas component menjadi function component react

fungsi toggle todo

Sekarang kita implementasikan fungsi toggle todo yang sebelumnya tertahan. Fungsi ini akan membuat setiap daftar tugas jadi punya status apakah sudah selesai atau belum

dispatch action dengan mapDispatchToProps

Kita juga bisa melakuakn dispatch action redux dengan mapDispatchToProps dari package react-redux untuk digunakan di dalam komponen reactjsnya

menambahkan filter

Untuk mengorganisir data yang banyak, hal yang normal untuk menambahkan sebuah filter, seperti di aplikasi kita ini, akan ada filter untuk aplikasi todo yang sudah selesai dan belum selesai

mengenal presentational dan container component

Pada penggunaan redux di aplikasi reactjs, tanpa sadar komponen kita akan menjadi sulit dibaca, konsep yang menarik untuk menyelesaikan masaha ini adalah memisahkan antara presentational dan container component

debug dengan redux dev tools

Kamu bisa melakuakn debug dengan redux dev tools dari remotedevio, dengna ini kita bisa melihat dengan detail, state kita seperti apa dan action apa saja yang terpanggil, tentunya masih banyak lagi!

mengenal middleware untuk logging

Salah satu kelebihan redux adalah kita bisa mengimplementasikan middleware, yang bertugas untuk menangani efek samping karena kita tidak boleh mengganggu action dan reducer yang harusnya pure funciton, di contoh ini kita melihat untuk logging middleware

fungsi async dengan redux thunk

Selain fungsi biasa (synchronous, dengan bantuan middleware kita juga bisa melakukan fungsi async seperti memanggil API. Karena itu middleware kita sekarang akan butuh bantuan package redux thunk

state awal preloadedState dan componentDidMount

Setiap aplikasi redux bisa kita berikat state awal, ada pilihan dengan memberikannya melalui preloadedState atau fungsi componentDidMount seperti di reactjs biasa

membuat fake api dengan jsonserver

Kamu butuh API untuk prototype dengan cepat? ada yang menarik nih dari jsonplaceholder typicode, kita bisa membuat fake api dengan cepat

init data dari API pada redux

Bagiamana dengan init data atau set data state awal dari API pada aplikasi redux di reactjs? karena kita sudah mengenal middleware dan redux thunk, ini akan lebih mudah

memakai dispatch di class component

Kita akan kembali memakai dispatch di class component, seiring dengan kebutuhan aplikasi todo ini yang terus berkembang, komponen kita juga harus menjadi ikut fleksibel

mengubah struktur store

Rombak besar-besaran! tidak ko, kita hanya akan mengubah struktur store kita agar menjadi lebih fleksible. Dengan ini, state reduxnya akan mudah menerima berbagai data baru

saat api loading dan error

Bagiamana dengan kondisi saat request api loading dan error. Di react redux disarankan untuk melakuakn dispatch action untuk setiap kondisi dari aplikasi API nya, bukan hanya pada saat sukses saja