Redux - Ara Yazılım

Redux'un kendisi eşzamanlıdır, öyleyse async gibi işlemler network requestRedux ile çalışmak? Burada ara yazılımlar işe yarar. Daha önce tartışıldığı gibi, indirgeyiciler, tüm yürütme mantığının yazıldığı yerdir. Reducer'ın, eylemi göndermeden önce ve sonra uygulamayı kimin yaptığı, ne kadar zaman aldığı veya uygulamanın durumunu günlüğe kaydettiği ile hiçbir ilgisi yoktur.

Bu durumda, Redux ara yazılım işlevi, indirgeyiciye ulaşmadan önce gönderilen eylemle etkileşime girecek bir ortam sağlar. Özelleştirilmiş ara yazılım işlevleri, bazı mantığı saran yüksek dereceli işlevler (başka bir işlevi döndüren bir işlev) yazarak oluşturulabilir. Yeni işlevler eklemek için birden çok ara yazılım bir araya getirilebilir ve her bir ara yazılım, önce ve sonra gelenler hakkında bilgi gerektirmez. Gönderilen eylem ile indirgeyici arasında bir yerde ara yazılımlar hayal edebilirsiniz.

Genel olarak, ara yazılımlar, uygulamanızdaki eşzamansız eylemlerle başa çıkmak için kullanılır. Redux, özel ara yazılımların yanı sıra redux-thunk ve redux-promise gibi Redux ara yazılımlarını kullanmamıza izin veren applyMiddleware adlı API'yi sağlar. Depolamak için ara yazılımlar uygular. ApplyMiddleware API kullanmanın sözdizimi şudur:

applyMiddleware(...middleware)

Ve bu, aşağıdaki gibi saklamak için uygulanabilir -

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

Ara yazılımlar, bir eylem nesnesi yerine bir işlev döndüren bir eylem dağıtıcısı yazmanıza izin verir. Aynısı için örnek aşağıda gösterilmiştir -

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

Koşullu gönderim, ara katman yazılımına yazılabilir. Her ara yazılım, deponun gönderimini alır, böylece yeni eylem gönderebilirler ve getState, geçerli duruma erişebilmeleri ve bir işlev döndürebilmeleri için bağımsız değişken olarak işlev görür. Bir iç işlevden herhangi bir dönüş değeri, gönderme işlevinin değeri olarak kullanılabilir olacaktır.

Aşağıda bir ara yazılımın sözdizimi verilmiştir -

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

GetState işlevi, mevcut duruma bağlı olarak yeni verilerin getirilip getirilmeyeceğine veya önbellek sonucunun döndürülmesine karar vermek için kullanışlıdır.

Özel bir ara yazılım kaydedici işlevi örneğini görelim. Sadece eylemi ve yeni durumu günlüğe kaydeder.

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

Şimdi, aşağıdaki kod satırını yazarak kaydedici ara yazılımını mağazaya uygulayın -

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

Aşağıdaki kodu kullanarak gönderilen eylemi ve yeni durumu kontrol etmek için bir eylem gönderin -

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

Yükleyiciyi ne zaman göstereceğinizi veya gizleyeceğinizi idare edebileceğiniz başka bir ara yazılım örneği aşağıda verilmiştir. Bu ara yazılım, herhangi bir kaynak talep ettiğinizde yükleyiciyi gösterir ve kaynak isteği tamamlandığında onu gizler.

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