Redux - JavaScript kitaplığı

Redux nedir?

• Redux, istemci, sunucu ve yerel ortamlarda tutarlı bir şekilde davranan ve test edilmesi kolay JavaScript uygulamaları yazmanıza yardımcı olmak için tasarlanmış öngörülebilir bir durum kapsayıcısıdır.
• Redux, Haziran 2015 civarında Dan Abramov tarafından oluşturuldu. Facebook'un Flux ve işlevsel programlama dili Elm'den esinlendi. Redux, basitliği , küçük boyutu (yalnızca 2 KB) ve harika belgeleri nedeniyle çok hızlı bir şekilde popüler oldu .

Redux'un öngörülebilirliği, aşağıda verilen en önemli üç ilkeyle belirlenir -

1. Tek Doğruluk Kaynağı - Uygulamanızın tamamının durumu, tek bir depodaki bir nesne ağacında saklanır . Tüm uygulama durumu tek bir ağaçta depolandığından, hata ayıklamayı kolaylaştırır ve geliştirmeyi hızlandırır.
2. Durum Salt Okunur - Durumu değiştirmenin tek yolu bir eylem , ne olduğunu açıklayan bir nesne yaymaktır. Bu, hiç kimsenin başvurunuzun durumunu doğrudan değiştiremeyeceği anlamına gelir.
3. Değişiklikler saf fonksiyonlarla yapılır - Durum ağacının eylemler tarafından nasıl dönüştürüldüğünü belirtmek için saf indirgeyiciler yazarsınız . İndirgeyici, durum değişikliğinin gerçekleştiği merkezi bir yerdir. İndirgeyici, mevcut durumu ve gerçekleştirilecek eylemi alan bir işlevdir. İşlev , mevcut durumun değiştirilmiş bir sürümünü değil, yeni güncellenmiş bir durumu döndürmelidir .

Redux'un üç yapı bölümü vardır: eylemler , depo ve indirgeyiciler .

Redux Eylemler

Özetle, eylemler olaylardır . Uygulamanızdan Redux mağazanıza veri göndermenin tek yolu bunlar. Veriler, kullanıcı etkileşimlerinden, API çağrıları gibi dahili olaylardan ve hatta form gönderimlerinden olabilir.

• Eylemler düz JavaScript nesneleridir ve gerçekleştirilecek eylemin türünü belirtmek için bir type özelliğine (genellikle sabit) sahip olmaları gerekir . Ayrıca eylem tarafından üzerinde çalışılması gereken bilgileri içeren bir yüke sahip olmalıdırlar.

{ 
  type: "LOGIN",
  payload: {
    username: "Ayush",
    password: "12345"
  }
}

const setLoginStatus = (name, password) => {
  return {
    type: "LOGIN",
    payload: {
      username: "Ayush",
      password: "12345"
    }
  }
}

store.dispatch(setLoginStatus(name, password));

• 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, indirgeyici içinde asla gerçekleştirilmemelidir functionsFonksiyonlar bağımsız değişkenleri, API çağrıları ve yönlendirme mantığı ve saf olmayan işlevi çağırma, örneğin Math.random ()
• reduceBir geri arama işlevi gerçekleştirildikten sonra birden çok değerden tek bir değerin hesaplandığı JavaScript'teki işlevi temel alır .

Redux reducer signature
(previousState, action) => nextState
Array.prototype.reduce signature
(accumulator, value) => (accumulator + value)
Example:
const handleAuth = (state = initialState, action) => {
    switch (action.type) {

      // This reducer handles any action with type "LOGIN"
      case "LOGIN":
          return state.map(user => {
              if (user.username !== action.payload.username) {
                  return user;
              }

              if (user.password == action.payload.password) {
                  return {
                      ...user,
                      login_status: "LOGGED IN"
                  }
              }
          });
        default:
          return state;
      } 
};

• Daha karmaşık uygulamalar için combineReducers()Redux tarafından sağlanan, yardımcı programı kullanmak mümkündür (gerçekten tavsiye edilir). Uygulamadaki tüm redüktörleri tek bir indeks düşürücüde birleştirir. Her redüktör, uygulamanın durumunun kendi kısmından sorumludur ve durum parametresi her redüktör için farklıdır. Yardımcı combineReducers()program, dosya yapısının bakımını çok daha kolay hale getirir.

const rootReducer = combineReducers({
    handleAuth: handleAuth,
    editProfile: editProfile,
    changePassword: changePassword
});

• Eyalete erişim sağlar getState();
• Durumun şu yolla güncellenmesine izin verir dispatch(action);
• Dinleyicileri şu yolla kaydeder subscribe(listener);
• Tarafından döndürülen işlev aracılığıyla dinleyicilerin kaydının silinmesini işler subscribe(listener).
• createStore - işlevin üç bağımsız değişkeni olabilir. İndirgeyici, uygulamanın bir sonraki durumunu döndüren bir işlevdir. PreloadedState, isteğe bağlı bir argümandır ve uygulamanızın ilk durumudur. Bir güçlendirici aynı zamanda isteğe bağlı bir argümandır. Mağazayı üçüncü taraf yetenekleriyle geliştirmenize yardımcı olacaktır.

Syntax - createStore(reducer, [preloadedState], [enhancer])
Example:
import { createStore } from ‘redux’;
import rootReducer from './reducers/index';
const store = createStore(rootReducer);

store.dispatch(setLoginStatus(‘alex’, ‘123456’));

• Redux'un kendisi eşzamanlıdır, bu nedenle ağ istekleri gibi eşzamansız işlemler Redux ile nasıl çalışır? 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 bunu kimin gerçekleştirdiği, ne kadar zaman aldığı veya eylem gönderilmeden önce ve sonra uygulamanın durumunu günlüğe kaydetmeyle 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.
• 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ımın yanı sıra redux-thunk ve redux-saga gibi Redux ara yazılımlarını kullanmamıza izin veren applyMiddleware adlı API'yi sağlar . 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));

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

Syntax - ({ getState, dispatch }) => next => action
function simpleMiddleware({ getState, dispatch }) {
  return function(next){
    return function(action){
      // processing
      const nextAction = next(action);
      // read the next state
      const state = getState();
      // return the next action or you can dispatch any other action
      return nextAction;  
    }
  }
}
const store = createStore(rootReducer , initialState=[ ] , applyMiddleware(simpleMiddleware));

• Sonucun tahmin edilebilirliği - Mevcut durumun eylemler ve uygulamanın diğer bölümleriyle nasıl senkronize edileceğine dair hiçbir kafa karışıklığı olmadan her zaman bir gerçeğin kaynağı vardır, mağaza.
• Sürdürülebilirlik - Öngörülebilir bir sonuca ve katı bir yapıya sahip olmak, kodun bakımını kolaylaştırır. Bu aynı zamanda iş mantığınızı bileşen ağacınızdan ayırmanıza yardımcı olur. Büyük ölçekli uygulamalar için, uygulamanızı daha öngörülebilir ve sürdürülebilir tutmak çok önemlidir.
• Organizasyon - Redux, kodun nasıl organize edilmesi gerektiği konusunda daha katıdır, bu da kodu daha tutarlı ve bir takımın birlikte çalışmasını kolaylaştırır.
• Sunucu oluşturma - Bu, özellikle ilk oluşturma için çok kullanışlıdır, daha iyi bir kullanıcı deneyimi veya arama motoru optimizasyonu sağlar. Sunucuda oluşturulan depoyu istemci tarafına aktarmanız yeterlidir.
• Geliştirici araçları - Geliştiriciler, uygulamada olup biten her şeyi, eylemlerden durum değişikliklerine kadar gerçek zamanlı olarak izleyebilir. Zaman yolculuğu yapan bir hata ayıklayıcı ile birlikte canlı kod düzenlemeyi sağlar.
• Topluluk ve ekosistem - Bu, herhangi bir kitaplığı veya çerçeveyi öğrenirken veya kullanırken büyük bir artıdır. Redux'un arkasında bir topluluğa sahip olmak, onu daha da çekici hale getiriyor.
• Test kolaylığı - Test edilebilir kod yazmanın ilk kuralı, yalnızca tek bir şey yapan ve bağımsız olan küçük işlevler yazmaktır. Redux'un kodu çoğunlukla tam da bu olan işlevlerdir: küçük, saf ve izole.
• Performans Avantajları - Uygulamanın durumunu global tutmanın bazı performans düşüşlerine neden olacağını varsayabilirsiniz. Büyük ölçüde durum böyle değil. React Redux birçok performans optimizasyonunu dahili olarak uygular, böylece kendi bağlı bileşeniniz yalnızca gerçekten ihtiyaç duyulduğunda yeniden çalışır.

• Redux ile çalışmanın son bir yararlı adımı, Redux'un kendi geliştirme araçlarını kurmak ve başlatmaktır. Chrome kullanıyorsanız, aşağıdaki bağlantıyı izleyerek Redux DevTools'u etkinleştirebilirsiniz:
• Ancak işe yaraması için bir adım daha var. Bizim de createStoreyöntemin, bizim redüktör sonra bağımsız değişken olarak aşağıdakileri geçmesi gerekiyor: window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()(). Bu eklemeyle şöyle store.jsgörünmeli:

import { createStore } from 'redux';
import reducer from './reducers';
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;