Redux Store ve HOC'lar Nasıl Kullanılır?

Adı : Redux Store ve HOC'lar Nasıl Kullanılır?

Redux Store ve HOC'lar Nasıl Kullanılır?

Redux, JavaScript uygulamalarında durum yönetimi için kullanılan popüler bir kütüphanedir. Redux, uygulamanın durumunu tek bir merkezi depoda yönetir ve bu depodaki durumu güncellemek veya okumak için aksiyonlar kullanır. Redux store, uygulamanın durumunu veya state'ini saklar ve bu durumu HOC'lar (Higher Order Components) kullanarak bileşenlere aktarır. HOC'lar, bileşenleri yeniden kullanılabilir kılan bir desendir.

Redux Store Kullanımı:
Redux store, uygulamanın durumunu depolamak için kullanılır ve bu durum, sadece belirli aksiyonlarla güncellenebilir. Redux store, uygulamalar arasında durumun paylaşılmasını sağlar ve uygulamanın farklı bileşenlerinde bu duruma erişim imkanı sunar.

Redux store kullanmak için öncelikle redux ve react-redux paketlerini projeye dahil etmemiz gerekmektedir. React uygulamasında store'u oluşturmak için createStore() fonksiyonunu kullanırız.

Örnek olarak; basit bir TODO uygulaması düşünelim. Burada yapılacaklar listesi saklanacak ve kullanıcının ekleyebileceği veya silebileceği öğeler bulunacak.

Öncelikle index.js dosyasında aşağıdaki gibi bir store oluşturarak başlayabiliriz:

```
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

ReactDOM.render(


,
document.getElementById('root')
);
```
Bu kodda, redux içerisinden createStore fonksiyonunu import ederek rootReducer'ı bir store olarak oluşturduk ve Provider bileşeniyle tüm uygulama ağacına store'u sağladık. Böylece, store'u herhangi bir noktada kullanarak duruma erişim imkanına sahip olacağız.

Şimdi, bu store'a erişmek istediğimiz bir bileşen olduğunu düşünelim ve bu bileşende Redux store'dan durumu okumak ve güncellemek istiyoruz. Bunun için connect() fonksiyonunu kullanacağız.

```
import React from 'react';
import { connect } from 'react-redux';

class TodoList extends React.Component {
render() {
return (

);
}
}

const mapStateToProps = state => ({
todos: state.todos
});

export default connect(mapStateToProps)(TodoList);
```

Yukarıdaki koddaTodoList bileşeni, Redux store'dan todos durumunu alıp listelemektedir. connect() fonksiyonunu kullanarak mapStateToProps fonksiyonunu component'e bağladık. mapStateToProps, Redux store'dan durumu alır ve component'in props'una ekler.

HOC'lar Nasıl Kullanılır?
Higher Order Components (HOC) React bileşenlerini saran fonksiyonlardır ve bileşenlerin yaşam döngüsüne erişim ve bazı ekstra özellikler eklemek için kullanılırlar. HOC'lar, kod tekrarını önlemek, redux store gibi durumu sağlamak veya kimlik doğrulama gibi genel bir mantığı paylaşmak için kullanışlıdır.

Örnek olarak, kimlik doğrulama işlemini gerçekleştiren bir HOC düşünelim:

```
import React from 'react';

const withAuth = (WrappedComponent) => {
class AuthComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
isAuthenticated: false
};
}

componentDidMount() {
// Kimlik doğrulama işlemleri
if (authService.isAuthenticated()) {
this.setState({
isAuthenticated: true
});
}
}

render() {
const { isAuthenticated } = this.state;
if (isAuthenticated) {
return ;
} else {
return

Kimlik doğrulaması başarısız!

;
}
}
}

return AuthComponent;
};

export default withAuth;
```

Yukarıdaki örnekte withAuth adında bir HOC oluşturduk. Bu HOC, WrappedComponent bileşenini saran bir AuthComponent sınıfı döndürür ve kimlik doğrulama işlemini gerçekleştirir. Eğer kullanıcı kimlik doğrulamasından geçerse WrappedComponent bileşenini döndürür, aksi halde \"Kimlik doğrulaması başarısız!\" mesajını döndürür.

Bu HOC'u kullanmak için, kimlik doğrulamasını gerektiren bileşenleri withAuth HOC'una sarmamız yeterlidir:

```
import React from 'react';
import withAuth from './withAuth';

class UserProfile extends React.Component {
render() {
return

Profil Sayfası

;
}
}

export default withAuth(UserProfile);
```

Yukarıdaki kodda, UserProfile bileşenini withAuth() fonksiyonuna sararak kimlik doğrulamasını gerektiren bir bileşen haline getirdik.

Sık Sorulan Sorular:
1. Redux Store, nasıl oluşturulur?
Redux Store'u oluşturmak için createStore() fonksiyonunu kullanırız. Bu fonksiyon, rootReducer'ı ve middleware'leri parametre olarak alır ve bir store nesnesi döndürür. createStore(rootReducer) şeklinde kullanırız.

2. HOC'lar nasıl çalışır?
HOC'lar, bileşenleri saran ve ekstra özellikler ekleyen fonksiyonlardır. HOC'lar, önceki bileşeni yeni bir bileşenle sarmak ve yeni bileşeni geri döndürmek için kullanılır.

3. mapStateToProps nedir ve ne işe yarar?
mapStateToProps, Redux store'un durumundan component'in ihtiyaç duyduğu özellikleri seçmek için kullanılan bir fonksiyondur. mapStateToProps fonksiyonu, Redux store'un durumunu parametre olarak alır ve state'i, component'in props'una ekler.

4. HOC'lardan store'u nasıl kullanabilirim?
HOC'lar, Redux store'u component'lere aktarmak için kullanılır. connect() fonksiyonunu kullanarak mapStateToProps fonksiyonunu component'e bağlayabilir ve store'daki durumu component'in props'una ekleyebilirsiniz.

5. HOC'lar kullanmadan Redux store'a nasıl erişebilirim?
connect() fonksiyonunu kullanmadan da Redux store'a erişebilirsiniz, ancak bu daha zor olabilir. Store'u context API'sini kullanarak component ağacında geçirmeniz veya useDispatch ve useSelector gibi Hooks'ları kullanmanız gerekebilir. Ancak, react-redux paketindeki connect() fonksiyonu, bu işi kolaylaştırır ve store'a erişimi sağlar."