Redux - Temel Kavramlar

Uygulamamızın durumunun adı verilen düz bir nesne tarafından tanımlandığını varsayalım. initialState aşağıdaki gibidir -

const initialState = {
   isLoading: false,
   items: [],
   hasError: false
};

Uygulamanızdaki her kod parçası bu durumu değiştiremez. Durumu değiştirmek için bir eylem göndermeniz gerekir.

Eylem nedir?

Eylem, bir tür özelliği ile değişikliğe neden olma niyetini açıklayan düz bir nesnedir. Ne tür bir eylemin gerçekleştirildiğini söyleyen bir type özelliğine sahip olmalıdır. Eylem komutu aşağıdaki gibidir -

return {
   type: 'ITEMS_REQUEST', //action type
   isLoading: true //payload information
}

Eylemler ve durumlar, Reducer adı verilen bir işlev tarafından bir arada tutulur. Değişikliğe neden olmak amacıyla bir eylem gönderilir. Bu değişiklik redüktör tarafından yapılır. Redüktör, Redux'daki durumları değiştirmenin tek yoludur, bu da onu daha öngörülebilir, merkezi ve hata ayıklanabilir hale getirir. 'ITEMS_REQUEST' eylemini işleyen bir indirgeme işlevi aşağıdaki gibidir -

const reducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ITEMS_REQUEST':
         return Object.assign({}, state, {
            isLoading: action.isLoading
         })
      default:
         return state;
   }
}

Redux, uygulama durumunu tutan tek bir depoya sahiptir. Kodunuzu veri işleme mantığına göre bölmek istiyorsanız, Redux'daki mağazalar yerine indirgeyicilerinizi bölmeye başlamalısınız.

Redüktörleri nasıl bölebileceğimizi ve bunu mağazayla nasıl birleştirebileceğimizi bu öğreticide daha sonra tartışacağız.

Redux bileşenleri aşağıdaki gibidir -