Daftar dan Belajar Sekarang!

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

Poin: 250 EXP

❱ Perkenalan redux

berkenalan dengan redux locked icon tiga prinsip utama redux locked icon contoh aplikasi redux locked icon membuat fungsi createstore sendiri locked icon

❱ Redux di ReactJS

package react redux locked icon menyiapkan aplikasi todo locked icon komponen form dan fungsi connect locked icon action dan reducer untuk addtodo locked icon memanggil data store redux dengan mapStateToProps locked icon memisahkan komponen todo locked icon refactor todos locked icon fungsi toggle todo locked icon dispatch action dengan mapDispatchToProps locked icon menambahkan filter locked icon mengenal presentational dan container component locked icon

❱ Dev Tools

debug dengan redux dev tools locked icon

❱ Middleware redux

mengenal middleware untuk logging locked icon fungsi async dengan redux thunk locked icon state awal preloadedState dan componentDidMount locked icon

❱ Bermain API

membuat fake api dengan jsonserver locked icon init data dari API pada redux locked icon memakai dispatch di class component locked icon mengubah struktur store locked icon saat api loading dan error locked icon mengirim data ke api di redux locked icon download icon

Detail Kelas

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


mengirim data ke api di redux

Kamu juga bisa mengirim data ke api di aplikasi react redux ini, caranya sama seperti melakukan request dengan package axios yang kita install


Belajar state mangement React dengan Redux

time icon 4 bulan yang lalu
level icon Sulit