Redux - pustaka JavaScript

Apa itu Redux?

• Redux adalah penampung status yang dapat diprediksi yang dirancang untuk membantu Anda menulis aplikasi JavaScript yang berperilaku secara konsisten di seluruh klien, server, dan lingkungan asli serta mudah untuk diuji.
• Redux dibuat oleh Dan Abramov sekitar Juni 2015. Ini terinspirasi oleh Flux Facebook dan bahasa pemrograman fungsional Elm. Redux menjadi populer dengan sangat cepat karena kesederhanaannya , ukurannya yang kecil (hanya 2 KB), dan dokumentasinya yang bagus .

Prediksi Redux ditentukan oleh tiga prinsip terpenting seperti yang diberikan di bawah ini -

1. Sumber Kebenaran Tunggal - Status seluruh aplikasi Anda disimpan dalam pohon objek dalam satu penyimpanan . Karena seluruh status aplikasi disimpan dalam satu pohon, hal itu membuat proses debug menjadi mudah, dan pengembangan lebih cepat.
2. Keadaan adalah Hanya-Baca - Satu-satunya cara untuk mengubah keadaan adalah dengan mengeluarkan tindakan , sebuah objek yang menjelaskan apa yang terjadi. Artinya, tidak ada yang bisa langsung mengubah status aplikasi Anda.
3. Perubahan dibuat dengan fungsi murni - Untuk menentukan bagaimana pohon status diubah oleh tindakan, Anda menulis pereduksi murni . Peredam adalah tempat sentral di mana modifikasi negara berlangsung. Peredam adalah fungsi yang mengambil keadaan saat ini dan tindakan untuk dilakukan. Fungsi tersebut harus mengembalikan keadaan yang baru diperbarui, bukan versi modifikasi dari keadaan yang ada .

Redux memiliki tiga bagian bangunan: tindakan , penyimpanan , dan pereduksi .

Tindakan di Redux

Singkatnya, tindakan adalah peristiwa . Mereka adalah satu-satunya cara Anda dapat mengirim data dari aplikasi Anda ke toko Redux Anda. Data dapat berasal dari interaksi pengguna, peristiwa internal seperti panggilan API, atau bahkan pengiriman formulir.

• Tindakan adalah objek JavaScript biasa , dan harus memiliki properti type (biasanya konstan) untuk menunjukkan jenis tindakan yang akan dilakukan. Mereka juga harus memiliki muatan yang berisi informasi yang harus dikerjakan oleh tindakan.

{ 
  type: "LOGIN",
  payload: {
    username: "Ayush",
    password: "12345"
  }
}

const setLoginStatus = (name, password) => {
  return {
    type: "LOGIN",
    payload: {
      username: "Ayush",
      password: "12345"
    }
  }
}

store.dispatch(setLoginStatus(name, password));

• Ini adalah satu-satunya tempat di mana Anda dapat menulis logika dan kalkulasi. Fungsi peredam akan menerima keadaan sebelumnya dari aplikasi dan tindakan yang dikirim, menghitung keadaan berikutnya, dan mengembalikan objek baru.
• Beberapa hal berikut tidak boleh dilakukan di dalam peredam −Mutasi argumen fungsi, panggilan API & logika perutean, dan Memanggil fungsi non-murni misalnya Math.random ()
• Ini didasarkan pada reducefungsi di JavaScript, di mana satu nilai dihitung dari beberapa nilai setelah fungsi panggilan balik dijalankan.

Redux reducer signature
(previousState, action) => nextState
Array.prototype.reduce signature
(accumulator, value) => (accumulator + value)
Example:
const handleAuth = (state = initialState, action) => {
    switch (action.type) {

      // This reducer handles any action with type "LOGIN"
      case "LOGIN":
          return state.map(user => {
              if (user.username !== action.payload.username) {
                  return user;
              }

              if (user.password == action.payload.password) {
                  return {
                      ...user,
                      login_status: "LOGGED IN"
                  }
              }
          });
        default:
          return state;
      } 
};

• Untuk aplikasi yang lebih kompleks, Anda dapat menggunakan combineReducers()utilitas, yang disediakan oleh Redux (memang, disarankan). Ini menggabungkan semua reduksi dalam aplikasi menjadi satu peredam indeks. Setiap peredam bertanggung jawab atas bagiannya sendiri dari status aplikasi, dan parameter status berbeda untuk setiap peredam. The combineReducers()utilitas membuat struktur file yang jauh lebih mudah untuk mempertahankan.

const rootReducer = combineReducers({
    handleAuth: handleAuth,
    editProfile: editProfile,
    changePassword: changePassword
});

• Mengizinkan akses ke negara melalui getState();
• Memungkinkan negara diperbarui melalui dispatch(action);
• Mendaftarkan pendengar melalui subscribe(listener);
• Menangani pencabutan pendengar melalui fungsi yang dikembalikan oleh subscribe(listener).
• createStore - fungsi dapat memiliki tiga argumen. Peredam adalah fungsi yang mengembalikan status aplikasi berikutnya. PreloadedState adalah argumen opsional dan merupakan status awal aplikasi Anda. Penambah juga merupakan argumen opsional. Ini akan membantu Anda meningkatkan toko dengan kemampuan pihak ketiga.

Syntax - createStore(reducer, [preloadedState], [enhancer])
Example:
import { createStore } from ‘redux’;
import rootReducer from './reducers/index';
const store = createStore(rootReducer);

store.dispatch(setLoginStatus(‘alex’, ‘123456’));

• Redux sendiri sinkron, jadi bagaimana operasi asinkron seperti permintaan jaringan bekerja dengan Redux? Di sini middlewares berguna.

• Seperti yang telah dibahas sebelumnya, reduksi adalah tempat di mana semua logika eksekusi ditulis. Reducer tidak ada hubungannya dengan siapa yang melakukannya, berapa lama waktu yang dibutuhkan, atau mencatat status aplikasi sebelum dan sesudah tindakan dikirim. Dalam hal ini, fungsi middleware Redux menyediakan media untuk berinteraksi dengan tindakan yang dikirim sebelum mencapai peredam.
• Biasanya, middlewares digunakan untuk menangani tindakan asinkron di aplikasi Anda. Redux menyediakan API yang disebut applyMiddleware yang memungkinkan kita untuk menggunakan middleware kustom serta middleware Redux seperti redux-thunk dan redux-saga . Dan ini dapat diterapkan ke toko sebagai berikut -

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(rootReducer, applyMiddleware(thunk));

function getUser() {
   return function() {
      return axios.get('/get_user_details');
   };
}

Syntax - ({ getState, dispatch }) => next => action
function simpleMiddleware({ getState, dispatch }) {
  return function(next){
    return function(action){
      // processing
      const nextAction = next(action);
      // read the next state
      const state = getState();
      // return the next action or you can dispatch any other action
      return nextAction;  
    }
  }
}
const store = createStore(rootReducer , initialState=[ ] , applyMiddleware(simpleMiddleware));

• Prediktabilitas hasil - Selalu ada satu sumber kebenaran, penyimpanan, tanpa kebingungan tentang cara menyinkronkan keadaan saat ini dengan tindakan dan bagian lain dari aplikasi.
• Pemeliharaan - Memiliki hasil yang dapat diprediksi dan struktur yang ketat membuat kode lebih mudah untuk dipelihara. Ini juga membantu Anda memisahkan logika bisnis dari pohon komponen Anda. Untuk aplikasi skala besar, sangat penting untuk menjaga aplikasi Anda lebih dapat diprediksi dan dipelihara.
• Organisasi - Redux lebih ketat tentang bagaimana kode harus diatur, yang membuat kode lebih konsisten dan lebih mudah bagi tim untuk bekerja.
• Rendering server - Ini sangat berguna, terutama untuk render awal, untuk memberikan pengalaman pengguna atau pengoptimalan mesin telusur yang lebih baik. Lewati saja toko yang dibuat di server ke sisi klien.
• Alat pengembang - Pengembang dapat melacak semua yang terjadi di aplikasi secara waktu nyata, mulai dari tindakan hingga perubahan status. Ini memberi Anda pengeditan kode langsung yang dikombinasikan dengan debugger perjalanan waktu.
• Komunitas dan ekosistem - Ini adalah nilai tambah yang sangat besar setiap kali Anda belajar atau menggunakan perpustakaan atau kerangka kerja apa pun. Memiliki komunitas di belakang Redux membuatnya lebih menarik untuk digunakan.
• Kemudahan pengujian - Aturan pertama menulis kode yang dapat diuji adalah menulis fungsi kecil yang hanya melakukan satu hal dan independen. Kode Redux sebagian besar merupakan fungsi yang hanya itu: kecil, murni dan terisolasi.
• Manfaat Performa - Anda mungkin berasumsi bahwa mempertahankan status aplikasi secara global akan mengakibatkan penurunan performa. Sebagian besar, bukan itu masalahnya. React Redux mengimplementasikan banyak pengoptimalan kinerja secara internal sehingga komponen Anda yang terhubung hanya dirender saat dibutuhkan.

• Langkah terakhir yang berguna untuk bekerja dengan Redux adalah menginstal dan memulai alat pengembangan Redux sendiri. Jika Anda menggunakan Chrome, Anda dapat mengaktifkan Redux DevTools dengan mengikuti tautan di bawah ini:
• Tapi ada satu langkah lagi untuk membuatnya berhasil. Dalam kami createStoremetode, kita harus lulus berikut ini sebagai argumen setelah peredam kami: window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()(). Dengan tambahan itu, store.jsakan terlihat seperti ini:

import { createStore } from 'redux';
import reducer from './reducers';
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;