Manage state di React atau React-Native bisa jadi menyusahkan apalagi kalau skalanya besar, dengan adanya Redux pun ada beberapa developer yang masih kesulitan dengan penjelasan Redux di setiap pattern-nya, namun Redux itu hanya sebagai opsi untuk memanage state di React, ada beberapa State Management library seperti MobX atau dengan Context dan useReducer tapi disini saya mencoba menjelaskan penggunaan redux yang sangan simpel. Saya akan mencover penjelasan Redux

Dengan adanya fitur Hooks di React dan sekarang developer lebih suka dengar fitur Hooks. Penggunaan Redux dengan Hooks sangat amat mudah.

Redux in a nutshell

sistem memanipulasi state dengan redux yaitu dengan action via type approach.

bagaimana cara memanipulasi state di Redux? jawabannya dengan menggunakan Action. Action disini adalah ketika user submit form dengan value name, dengan dispatch di redux, state akan termanipulasi.

// action/user.js
export const updateName = name => {
   return {
      type: "UPDATE_NAME",
      payload: name,
   }
}

export const updateEmail = email => {
   return {
      type: "UPDATE_EMAIL",
      payload: email,
   }
}

dan action yang lain...

lalu bagaimana memanage dan memanipulasi hasil state? dengan cara reducer. Dibawah ini menjelaskan sesuai case masing-masing di setiap action.type

// reducer/user.js
export const user = (state = {}, action) => {
   switch(action.type) {
      case "UPDATE_NAME":
           return { ...state, name: action.payload };
      case "UPDATE_EMAIL":
           return { ...state, email: action.payload };
      case "UPDATE_PHONE":
           return { ...state, phone: action.payload }
      default:
           return state
   }
}

setiap action trigger sesuai type reducer akan me-return sesuai obj yang ingin dimanipulasi. jika action updateName terpanggil, reducer akan melihat sesuai case "UPDATE_NAME" dan payload-nya termanipulasi di obj property name: action.payload

dan terakhir reducer yang sudah kita definisikan harus disimpan ke global store dengan cara pass reducer user ke createStore() function

// store.js
import { createStore } from "redux";
import { user } from "../reducer/user.js"
export const store = createStore(user);

// getState() berfungsi memanggil semua state 
// yang sudah tersimpan di store
const _getState = store.getState();

// dan kita bisa mensubscribe setiap ada manipulasi dari
// state dengan cara memanggil subscribe()
store.subscribe(() => console.log(_getState));

Penggunaan Redux di React

terima kasih kepada Dan Abramov dengan proposal React Hooks ini, React makin digemari dan sangat amat simpel pengunaanya dengan Redux. banyak yang meninggalkan Redux karena terlalu complicated dan jawabannya ya. Namun dengan adanya Hooks di Redux penggunaan di stateless functional terasa mudah

Konfigurasi awal sama saja dengan Redux jaman batu dengan cara wrap App Component sebagai top component di React

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

// wrap App componet dengan Provider component
const ReduxApp = () => {
   return (
      <Provider store={store}>
         <App/>
      </Provider>
   )
}

jaman class based untuk mendapatkan state ke props dengan cara mapStateToProps() lalu dengan menggunakan connect() dari module react-redux namun di Hooks sangat berbeda kita bisa mendapatkan state yang sudah didefiniskan dengan cara useSelector() di stateless function:

import React, { useEffect } from "react";
import { useSelector } from "react-redux";

const User = () => {
   const { name } = useSelector(state => state.user);

   useEffect(() => {
      console.log(name);
   }, []);

   return (
      <div>
        <h1>User</h1>
        {name && <p>{name}</p>}
      </div>
   )
};

kita bisa menggunakan useEffect() sebagai componentDidMount() di class based. Jika di render object name akan undefined karena kita belum menipulasi state dengan obj name.

bagaimana memanipuli state-nya di React menggunakan Redux Hooks? dengan cara useDispatch();

import React, { useEffect } from "react";

// gunakan useDispatch dari modul react-redux
import { useSelector, useDispatch } from "react-redux";

// import action yang sudah kita definisi sebelumnya
import { updateName, updateEmail, updatePhone } from "../actions/user"

const User = () => {
   // gunakan useSelectior() dengan inisial sesuai reducer
   const { name, email, phone } = useSelector(state => state.user);

   const dispatch = useDispatch();

   // kita bisa definsikan setiap action disini
   const dispatchName = name => dispatch(updateName(name))
   const dispatchEmail = email => dispatch(updateName(email))
   const dispatchPhone = phone => dispatch(updateName(phone))

   useEffect(() => {
      console.log(name, email, phone)
   }, [])

   return (
      <div>
        <h1>User</h1>
        <button onClick={() => dispatchName('Nama kalian')}>
         Change name
        </button>
        <button onClick={() => dispatchEmail('user@example.com')}>
         Change email
        </button>
        <button onClick={() => dispatchEmail('+6212344567')}>
         Change phone
        </button>

        {name && <p>{name}</p>}
        {email && <p>{email}</p>}
        {phone && <p>{phone}</p>}
      </div>
   )
}

useDispatch disini sama dengan dispatch pada umumnya di Redux, namun di Hook approach penggunaan action disini tidak perlu di bind dengan bindActionCreators dan mapDispatchToProps. dan penggunaan useDispatch tidak bisa langsung ke JSX, maka dari itu harus dibuat helper function untuk setiap Action yang sudah kita definisi

Penggunaan Redux Hooks di stateless function React meminimalisir coding yang jumlahnya banyak jika di compare menggunakan class based approach.

Sekian dari saya penjelasan Redux Hooks di React. Penggunaan ini bisa juga dilakukan di React-Native

Terima kasih