Redux - Middleware

Redux sendiri sinkron, jadi bagaimana async operasi seperti network requestbekerja 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. Fungsi middleware yang disesuaikan dapat dibuat dengan menulis fungsi tingkat tinggi (fungsi yang mengembalikan fungsi lain), yang membungkus beberapa logika. Beberapa middleware dapat digabungkan untuk menambahkan fungsionalitas baru, dan setiap middleware tidak memerlukan pengetahuan tentang apa yang datang sebelum dan sesudah. Anda dapat membayangkan middlewares di suatu tempat antara tindakan yang dikirim dan 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-promise. Ini berlaku middlewares untuk menyimpan. Sintaks menggunakan API applyMiddleware adalah -

applyMiddleware(...middleware)

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));

Middlewares akan membiarkan Anda menulis dispatcher tindakan yang mengembalikan fungsi alih-alih objek tindakan. Contoh yang sama ditunjukkan di bawah ini -

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

Pengiriman bersyarat dapat ditulis di dalam middleware. Setiap middleware menerima pengiriman toko sehingga mereka dapat mengirimkan tindakan baru, dan fungsi getState sebagai argumen sehingga mereka dapat mengakses status saat ini dan mengembalikan fungsi. Setiap nilai kembali dari fungsi dalam akan tersedia sebagai nilai fungsi pengiriman itu sendiri.

Berikut ini adalah sintaks middleware -

({ getState, dispatch }) => next => action

Fungsi getState berguna untuk memutuskan apakah data baru akan diambil atau hasil cache harus dikembalikan, bergantung pada status saat ini.

Mari kita lihat contoh fungsi logger middleware kustom. Ini hanya mencatat tindakan dan status baru.

import { createStore, applyMiddleware } from 'redux'
import userLogin from './reducers'

function logger({ getState }) {
   return next => action => {
      console.log(‘action’, action);
      const returnVal = next(action);
      console.log('state when action is dispatched', getState()); 
      return returnVal;
   }
}

Sekarang terapkan middleware logger ke toko dengan menulis baris kode berikut -

const store = createStore(userLogin , initialState=[ ] , applyMiddleware(logger));

Kirim tindakan untuk memeriksa tindakan yang dikirim dan status baru menggunakan kode di bawah ini -

store.dispatch({
   type: 'ITEMS_REQUEST', 
	isLoading: true
})

Contoh lain dari middleware di mana Anda dapat menangani kapan harus menampilkan atau menyembunyikan loader diberikan di bawah ini. Middleware ini menampilkan loader saat Anda meminta resource apa pun dan menyembunyikannya saat permintaan resource telah selesai.

import isPromise from 'is-promise';

function loaderHandler({ dispatch }) {
   return next => action => {
      if (isPromise(action)) {
         dispatch({ type: 'SHOW_LOADER' });
         action
            .then(() => dispatch({ type: 'HIDE_LOADER' }))
            .catch(() => dispatch({ type: 'HIDE_LOADER' }));
      }
      return next(action);
   };
}
const store = createStore(
   userLogin , initialState = [ ] , 
   applyMiddleware(loaderHandler)
);