What is redux ? what is the use of redux and how it is different from state managements and provide me some sample code/architechture of redux

Overview

Redux is a predictable state management pattern where the entire app state lives in a single store, and all state changes happen through actions dispatched to reducers.

---

Redux Core Concepts

textCopy
Action → Reducer → Store → UI
  ↑                          |
  └──────────────────────────┘ (UI dispatches actions)

---

Flutter Redux Example

yamlCopy
dependencies:
  flutter_redux: ^0.10.0
  redux: ^5.0.0

1. Define State

dartCopy
class AppState {
  final int counter;
  final bool isLoading;
  final List<User> users;

  AppState({
    this.counter = 0,
    this.isLoading = false,
    this.users = const [],
  });

  AppState copyWith({int? counter, bool? isLoading, List<User>? users}) {
    return AppState(
      counter: counter ?? this.counter,
      isLoading: isLoading ?? this.isLoading,
      users: users ?? this.users,
    );
  }
}

2. Define Actions

dartCopy
class IncrementAction {}
class DecrementAction {}
class LoadUsersAction {}
class UsersLoadedAction {
  final List<User> users;
  UsersLoadedAction(this.users);
}

3. Define Reducer

dartCopy
AppState appReducer(AppState state, dynamic action) {
  if (action is IncrementAction) {
    return state.copyWith(counter: state.counter + 1);
  }
  if (action is DecrementAction) {
    return state.copyWith(counter: state.counter - 1);
  }
  if (action is UsersLoadedAction) {
    return state.copyWith(users: action.users, isLoading: false);
  }
  return state;
}

4. Create Store and Provide

dartCopy
void main() {
  final store = Store<AppState>(
    appReducer,
    initialState: AppState(),
    middleware: [thunkMiddleware],
  );

  runApp(StoreProvider<AppState>(
    store: store,
    child: MyApp(),
  ));
}

5. Connect UI

dartCopy
// StoreConnector maps store state to widget props
StoreConnector<AppState, int>(
  converter: (store) => store.state.counter,
  builder: (context, counter) => Text('Count: $counter'),
)

// Dispatch action
StoreConnector<AppState, VoidCallback>(
  converter: (store) => () => store.dispatch(IncrementAction()),
  builder: (context, increment) => ElevatedButton(
    onPressed: increment,
    child: Text('Increment'),
  ),
)

---

Redux vs Other Flutter State Management

---

When to Use Redux in Flutter

Honest Assessment: Redux is powerful but brings significant boilerplate. Most Flutter teams prefer BLoC or Riverpod which offer similar architectural benefits with less ceremony.