Focus mode

React Native

State Management


Uygulama içerisinde global state yönetimine verilen addır.


React'da uygulama geliştirirken component yapıları belirli bir amaca göre şekillenir. Örneğin ürün satışından sorumlu componentler Product ön eki ile oluşturulur ve o componentleri amacı, bağlamı (yani contexti) "Product" yapısı olur.


İşte bizim o Product yapısından sorumlu olan ve ihtiyaç duyduğu, mantıksal olarak her yerden erişilebilen bir state yapısı kurmamıza olanak sağlayan yapılara state management yapıları adı veriyoruz.


Bunlara örnek olarak;



ya da React'in kendi Context yapısı verilebilir.


Biz endüstride de sıklıkla kullanılan Redux yapısı inceleyeceğiz.


Redux


Temel olarak üç bileşene odaklanır; store, reducer ve Provider.


store: İlgili contexte ihtiyaç duyulan statelerin tanımlamaları ve initial değerlerinin belirlendiği yapıdır. Bir JS objesidir


reducer: Belirlenen global statelerin güncellemesinden sorumlu fonksiyondur. Güncel state değerini ve tetiklenirken gönderilen parametreleri argüman olarak dönen bir fonksiyondur.


Provider: Oluşturulan yapının özel bir React componenti formunda tanımlanmasını sağlar. Bir React componentidir.


const store = createStore(
    // REDUCER
    (state, action) => {
        return (
            switch(action.type)
                case: "UPDATE_USER"
                    const {newUser} = action.payload;
                    return {...state, user: newUser};
        )
    },
    {  // STORE
        user: null;
    }
) 
    // PROVIDER
    <Provider store={store}>
        <App />
    </Provider>


Alt componentlerin herhangi birinde kullanım şekli ise;


const User = () => {
    const currentUser = useSelector(selector => selector.user);
    const dispatch = useDispatch();

    function updateUser(newUser){
        dispatch({
                type: "UPDATE_USER", 
                payload: { newUser }
            }
        );
    }

    return (
        <SafeAreaView>
            ...
            ...
            ...
        </SafeAreaView>
    )
}


🔧


Patika Plus Banner

Yazılım Kariyerinde İlerlemeni Hızlandıracak Eğitimler

Kendi kendine yazılım öğrenirken zorlanıyor, takıldığın noktalarda bir mentore mi ihtiyaç duyuyorsun? Patika+ programlarımız ile 4-8 aylık yoğun eğitim kamplarına katıl, proje tabanlı canlı dersler ve sana özel hazırlanmış eğitimlerle gereken tüm yetenekleri kazan, iş hayatına başla!

Comments

You need to enroll in the course to be able to comment!