08.05. Reducer - Erdinç Uzun

Reducer’lar, action sonucunda uygulamanın var olan state’i değiştirmesini sağlar. Başka bir deyişle, action uygulamaya sadece veri döndürür, uygulamanın değişikliğinin state’e aktarılması ise reducer tarafından olur.

Redux’ta uygulamanın state bilgisi tek bir nesne olarak depolanır. Eğer birden fazla nesneyi tutmayı düşünürseniz bunları ayrı olarak tutulması gerekir. reducer klasörüne placeReducer.js adındaki dosyayı oluşturup aşağıdaki kodları yazalım.

import { YER_EKLE } from '../actions/types';

const initialState = {
  placeName: '',
  places: []
};

const placeReducer = (state = initialState, action) => {
  switch(action.type) {
    case YER_EKLE:
      return {
        ...state,
        places: state.places.concat({
          key: Math.random(),
          value: action.payload
        })
      };
    default:
      return state;
  }
}

export default placeReducer;

import { YER_EKLE } from '../actions/types';

const initialState = {

placeName: '',

places: []

};

const placeReducer = (state = initialState, action) => {

switch(action.type) {

case YER_EKLE:

return {

...state,

places: state.places.concat({

key: Math.random(),

value: action.payload

})

};

default:

return state;

}

export default placeReducer;

placeReducer, state ve action argümanlarını içerir. İlk başlangıçta, uygulamanın başlangıç değerlerini içerir. Ardından case durumuna göre argümanları yönetir. action argümanı type ve payload değişkenlerini içerir. payload, TextInput üzerinden alacağımız yer ismini tutar. Gelen yer isimlerini places ve geçerli durum olarak yeni state’i döndürür.