Anlamak ve içinde _ Redux Store Actions Reducers React

Redux destekli bir uygulamada mimari üç ana kavram etrafında döner: Redux store, actions ve reducers. Bu kavramların her birini daha derinlemesine inceleyelim ve birlikte nasıl çalıştıklarını görelim.

Redux Store

Redux, store uygulamanızın tam durumunu tutan tek gerçek kaynaktır. Esasen tüm uygulama durumunu temsil eden verileri içeren bir JavaScript nesnesidir. Redux kütüphanesindeki fonksiyonu store kullanarak yaratırsınız. createStore

Actions

Actions uygulamada meydana gelen bir şeyi tanımlayan düz JavaScript nesneleridir. type Gerçekleştirilen eylemin türünü belirten bir alan taşırlar ve ek veriler de dahil edilebilir. Actions eylem nesnelerini döndüren işlevler olan eylem oluşturucular kullanılarak oluşturulur. Örneğin:

// Action Types  
const ADD_TODO = 'ADD_TODO';  
  
// Action Creator  
const addTodo =(text) => {  
  return {  
    type: ADD_TODO,  
    payload: text  
  };  
};  

Reducers

Reducers yanıt olarak uygulamanın durumunun nasıl değişeceğini belirtin actions. Redüktör, mevcut durumu ve eylemi argüman olarak alan ve yeni bir durum döndüren saf bir fonksiyondur. Reducers işlevi kullanılarak tek bir kök azaltıcıda birleştirilir combineReducers. İşte basit bir örnek:

// Reducer  
const todosReducer =(state = [], action) => {  
  switch(action.type) {  
    case ADD_TODO:  
      return [...state, action.payload];  
    default:  
      return state;  
  }  
};  
  
// Combine Reducers  
const rootReducer = combineReducers({  
  todos: todosReducer,  
  // ...other reducers  
});  

Birlikte çalışma

İşlevi kullanarak bir eylem gönderdiğinizde dispatch Redux, eylemi tüm reducers. Her redüktör, eylemin türünün kendi türüyle eşleşip eşleşmediğini kontrol eder ve durumun ilgili bölümünü buna göre günceller. Güncellenen durum daha sonra Redux'ta depolanır store ve bağlı tüm bileşenler yeni duruma göre yeniden oluşturulur.

Örnek Senaryo

Bir yapılacaklar listesi uygulaması düşünün. ADD_TODO Kullanıcı yeni bir yapılacak iş eklediğinde, yük olarak yapılacak işin türünü ve metnini içeren bir eylem gönderilir. Yapılacaklar azaltıcısı bu eylemi alır, yeni yapılacakları duruma ekler ve güncellenmiş durumu döndürür.

Çözüm

Redux store, actions ve reducers etkileşiminin nasıl olduğunu anlamak etkili durum yönetimi için çok önemlidir. Bu mimari, endişelerin net bir şekilde ayrılmasını sağlar ve karmaşık uygulama durumlarının yönetilmesini kolaylaştırır. Redux ile gelişmeye devam ettikçe bu kavramlar durum yönetimi stratejinizin temelini oluşturacaktır.