Redux adalah sebuah framework yang dibuat untuk mengelola state di aplikasi. Sementara umumnya digunakan sebagai state management tool dengan React, kita dapat menggunakannya dengan javascript framework dan library.
Pada dasarnya Redux bekerja di sisi backend yang berkolaborasi dengan React-native. Peran Redux dalam sebuah aplikasi adalah melakukan perubahan state yang dibutuhkan setiap fungsi di aplikasi.
Redux sendiri adalah pustaka sendiri yang dapat digunakan dengan UI layer atau UI framework apa pun, termasuk React, Angular, Vue, dan Vanilla JS. Meskipun Redux dan React umumnya digunakan bersama-sama, mereka tidak tergantung satu sama lain.

Bagaimana Redux mengalirkan data di React
Aliran data dalam aplikasi React-Redux dimulai pada level komponen saat user berinteraksi dengan UI aplikasi. Interaksi ini menyebabkan action creators dispatching atau mengirimkan sebuah action.
Ketika suatu action melakukan dispatched, itu diterima oleh root reducer aplikasi dan di passed ke semua reducers.

Komponen Redux Di dalam React
Redux memiliki 4 komponen bagian

1. Store

2. Reducers

3. Actions

4. Middleware

Mari kita bahas secara singkat apa yang masing-masing lakukan. ini penting karena membantu memahami manfaat Redux dan cara penggunaannya. Tapi sebelumnya kita akan memberikan sebuah gambaran bagaimana proses Redux berjalan.

Contoh kasus restaurant

Analoginya konsumen datang ke restauran dan mendapatkan meja. Kemudian konsumen pesan kopi (state), datanglah pelayan untuk menuliskan pesanan kopi (action creator) lalu pelayan memberikan perintah buatkan kopi (action) untuk dibuatkan ke dapur (reducer).

Data Flow : konsumen-> order kopi (state)-> pelayanan tulis pesanan (action creator)-> memberikan perintah ke dapur (action) -> Dapur (Reducer).

— Store
Redux dapat digunakan sebagai data store / penyimpanan untuk setiap lapisan UI. User yang paling umum adalah dengan React dan React native. Store ini bisa dikatakan sebagai pusat dari semua state global dan mengatur perubahan data diseluruh operasi. Store ini pertama kali di inisialisasi saat memulai aplikasi. Sebagai contoh ilustrasi disebuah restaurant diatas maka coffee akan disimpan / melewati store sebelum sampai dikonsumsi konsumen. Store dapat data dari Actions.
Contoh penggunaan store diredux:

import { createStore } from "redux";
const initialState = {
  menu: "coffee",
};

const reducer = (state = initialState, actions) => {
  // pembaruan state berdasarkan actions
  return state;
};
const store = createStore(reducer);

— Actions
Actions adalah satu-satunya sumber informasi untuk store sesuai dengan dokumentasi Redux. Actions membawa payload informasi dari aplikasi untuk disimpan. Seperti yang dibahas sebelumnya, actions adalah objek javascript biasa yang harus memiliki “type” atribut untuk menunjukkan jenis actions yang dilakukan. Pada contoh restauran di atas actions ini sebagai sebuah statement perintah dari pelayan yang diberikan ke reducer.
Contoh Penggunaaan Actions di Redux

//state -> ‘coffee’;  (from customer)
//actions creator  (delivery waiters order ‘ADD’)
const addOrder=(coffee)=>{
  return(
    type:"ADD",
    payload: coffee
    )
    export default addOrder;
}

- Reducer
Reducer adalah berfungsi yang mengambil state dan action yang dikirimkan, kemudian mengembalikan state baru berdasarkan action. Reduces ini yang bertangung jawab untuk memperbaruhi state di Redux Store.

• Ada 2 Bagian yaitu:
  

1. Bagian untuk melakukan pekerjaan.

import addOrder from "./addOrder";
import { combineReducers } from "redux";

const initialState={...}
export newTodo(state=initialState, action) => {
  switch(action.type){
    case "ADD":
      return [..state, action.payload];
      }
}

2. Bagian untuk menyatukan semua pekerjaan dari aplikasi.

const appState = combineReducers({ newTodo });

Note: Sintak diatas terdapat 'combineReducer' library bawaan dari redux, berguna untuk menyatukan banyak reducer. Dan fungsi 'newTodo' untuk melakukan perubahan state berdasarkan action type.

— Middleware
Redux middleware memungkinkan kita untuk menangkap setiap actions yang dikirim ke reducer sehingga kita dapat membuat perubahan pada actions atau membatalkan actions. Middleware membantu kita dalam proses redux untuk melakukan tugas seperti logging, error reporting, membuat asynchronous requests, routing dan atau mengubah action sebelum mencapai reducer.

Ada 2 middleware yang sering digunakan

1. Redux Thunk

2. Redux Saga

Untuk menerapkan middleware saat membuat penyimpanan aplikasi menggunakan 'applyMiddleware' Redux.

import { createStore, applyMiddleware } from "redux";
const store = createStore(reducer, applyMiddleware(thunk));

Konsep utama Redux
Redux dapat dijelaskan dalam 3 prinsip mendasar:

1. Single source, global state aplikasi disimpan di pohon objek dalam satu store.

2. State is read-only, cara untuk mengubah state adalah dengan emit sebuah action, sebuah objek yang menggambarkan apa yang terjadi.

3. Perubahan dibuat menggunakan pure functions.

Bagaimana Redux bekerja secara internal
Internal React Redux bekerja memangil store. Subscribe() kapan sebuah component mount. Setiap waktu Redux store berubah, subscribe callback. Di dalamnya, React Redux, memanggil React setState() dengan berbicara Redux store state dan meneruskannya melalui mapStateProps().

Aliran data Redux
Redux mengikuti aliran data searah. Yang artinya bahwa data aplikasi kita akan mengikuti aliran data yang one-way binding data flow. Saat aplikasi tumbuh dan menjadi kompleks, sulit untuk mereproduksi masalah dan menambahkan fitur baru jika Anda tidak memiliki kendali atas state aplikasi.

Redux Di Dalam React
React Redux adalah official React resmi untuk Redux. Memungkinkan komponen React untuk read data dari Redux Store, dan dispatch actions ke reduct store untuk update data.
Redux membantu aplikasi untuk meluaskan dengan menyediakan cara yang masuk akal untuk mengelola state melalui model aliran data yang searah.