Redux - Redüktörler

Redüktörler, Redux'ta saf bir işlevdir. Saf fonksiyonlar tahmin edilebilir. Redüktörler, Redux'ta durumları değiştirmenin tek yoludur. Mantık ve hesaplamalar yazabileceğiniz tek yer orasıdır. İndirgeyici işlevi, uygulamanın önceki durumunu ve gönderilen eylemi kabul eder, sonraki durumu hesaplar ve yeni nesneyi döndürür.

Aşağıdaki birkaç şey asla redüktörün içinde yapılmamalıdır -

  • Fonksiyon argümanlarının mutasyonu
  • API çağrıları ve yönlendirme mantığı
  • Saf olmayan işlevi çağırma, örneğin Math.random ()

Aşağıdakiler bir redüktörün sözdizimidir -

(state,action) => newState

Eylem yaratıcıları modülünde tartışılan ürün öğelerinin listesini bir web sayfasında gösterme örneğine devam edelim. İndirgeyicisinin nasıl yazılacağını aşağıda görelim.

const initialState = {
   isLoading: false,
   items: []
};
const reducer = (state = initialState, action) => {
   switch (action.type) {
      case 'ITEMS_REQUEST':
         return Object.assign({}, state, {
            isLoading: action.payload.isLoading
         })
      case ‘ITEMS_REQUEST_SUCCESS':
         return Object.assign({}, state, {
            items: state.items.concat(action.items),
            isLoading: action.isLoading
         })
      default:
         return state;
   }
}
export default reducer;

İlk olarak eğer state 'initialState' olarak ayarlamazsanız, Redux tanımlanmamış durumdaki redüktörü çağırır. Bu kod örneğinde, JavaScript'in concat () işlevi, var olan diziyi değiştirmeyen 'ITEMS_REQUEST_SUCCESS'de kullanılır; bunun yerine yeni bir dizi döndürür.

Bu şekilde devletin mutasyona uğramasını önleyebilirsiniz. Asla doğrudan eyalete yazmayın. 'ITEMS_REQUEST'te, alınan eylemin durum değerini ayarlamamız gerekiyor.

Mantığımızı redüktörde yazabileceğimiz ve onu mantıksal veri bazında bölebileceğimiz zaten tartışılmıştır. Büyük bir uygulama ile uğraşırken redüktörleri nasıl bölerek nasıl kök redüktör olarak birleştirebileceğimizi görelim.

Diyelim ki, bir kullanıcının ürün sipariş durumuna erişebileceği ve istek listesi bilgilerini görebileceği bir web sayfası tasarlamak istiyoruz. Mantığı farklı redüktör dosyalarında ayırabilir ve bağımsız olarak çalışmasını sağlayabiliriz. Bir sipariş kimliği ve kullanıcı kimliğine karşılık gelen sipariş durumunu almak için GET_ORDER_STATUS eyleminin gönderildiğini varsayalım.

/reducer/orderStatusReducer.js
import { GET_ORDER_STATUS } from ‘../constants/appConstant’;
export default function (state = {} , action) {
   switch(action.type) {
      case GET_ORDER_STATUS:
         return { ...state, orderStatusData: action.payload.orderStatus };
      default:
         return state;
   }
}

Benzer şekilde, kullanıcının bir kullanıcıya ilişkin istek listesi bilgilerini almak için GET_WISHLIST_ITEMS eyleminin gönderildiğini varsayın.

/reducer/getWishlistDataReducer.js
import { GET_WISHLIST_ITEMS } from ‘../constants/appConstant’;
export default function (state = {}, action) {
   switch(action.type) {
      case GET_WISHLIST_ITEMS:
         return { ...state, wishlistData: action.payload.wishlistData };
      default:
         return state;
   }
}

Şimdi, Redux combinesini kullanarak her iki redüktörü birleştirebiliriz. CombinReducers, değerleri farklı indirgeme işlevleri olan bir nesneyi döndüren bir işlev oluşturur. İndeks düşürücü dosyasındaki tüm redüktörleri içe aktarabilir ve bunları ilgili isimleriyle birlikte bir nesne olarak birleştirebilirsiniz.

/reducer/index.js
import { combineReducers } from ‘redux’;
import OrderStatusReducer from ‘./orderStatusReducer’;
import GetWishlistDataReducer from ‘./getWishlistDataReducer’;

const rootReducer = combineReducers ({
   orderStatusReducer: OrderStatusReducer,
   getWishlistDataReducer: GetWishlistDataReducer
});
export default rootReducer;

Şimdi, bu rootReducer'ı createStore yöntemine aşağıdaki gibi iletebilirsiniz -

const store = createStore(rootReducer);