Redux, uygulama durumunu (state) yönetmek için kullanılan bir durum yönetimi kütüphanesidir. Özellikle büyük ve karmaşık uygulamalarda durum yönetimini merkezileştirmek ve tahmin edilebilir hale getirmek için kullanılır. Redux, JavaScript dünyasında (özellikle React ile) popüler hale gelmiş olsa da, Flutter gibi diğer framework’lerde de kullanılabilir.

Flutter’da Redux, uygulamanın durumunu tek bir merkezi depoda (store) tutar ve bu durumu yalnızca belirli kurallara göre günceller. Bu, uygulamanın durumunu yönetmeyi daha kolay ve tutarlı hale getirir.

Redux’un Temel Kavramları

Redux’un çalışma prensibi üç temel kavrama dayanır:

1. State (Durum):
   • Uygulamanın mevcut durumunu temsil eder.
   • Örneğin, bir kullanıcının giriş yapıp yapmadığı, bir liste öğelerinin neler olduğu gibi bilgiler state’de saklanır.
   • State, genellikle bir nesne (object) veya veri yapısıdır.
2. Actions (Eylemler):
   • Uygulamanın durumunu değiştirmek için gönderilen talimatlardır.
   • Örneğin, “Kullanıcı giriş yaptı” veya “Listeye yeni öğe eklendi” gibi eylemler.
   • Actions, genellikle bir type alanına sahip basit nesnelerdir. İsteğe bağlı olarak ek veriler (payload) de taşıyabilir.

// Örnek bir action
class AddItemAction {
  final String item;
  AddItemAction(this.item);
}

Reducers (İndirgeyiciler):

• Actions’ları alır ve mevcut state’i bu action’a göre günceller.
• Reducer, saf bir fonksiyondur (pure function), yani aynı girdi için her zaman aynı çıktıyı üretir.
• Reducer, mevcut state’i ve action’ı alır, yeni state’i hesaplar ve döndürür.

State Tanımlama:

class AppState {
  final int counter;
  AppState({this.counter = 0});
}

Actions Tanımlama:

class IncrementAction {}

class DecrementAction {}

Reducer Tanımlama:

AppState reducer(AppState state, dynamic action) {
if (action is IncrementAction) {
return AppState(counter: state.counter + 1);
} else if (action is DecrementAction) {
return AppState(counter: state.counter – 1);
}
return state;
}

Store Oluşturma:

final store = Store<AppState>(
  reducer,
  initialState: AppState(),
);
UI'da Redux Kullanma:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreProvider(
      store: store,
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('Redux Example')),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                StoreConnector<AppState, String>(
                  converter: (store) => store.state.counter.toString(),
                  builder: (context, counter) {
                    return Text('Counter: $counter');
                  },
                ),
                ElevatedButton(
                  onPressed: () {
                    store.dispatch(IncrementAction());
                  },
                  child: Text('Increment'),
                ),
                ElevatedButton(
                  onPressed: () {
                    store.dispatch(DecrementAction());
                  },
                  child: Text('Decrement'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}