Implementing Redux for Centralized State in Flutter

Flutter, Google’s UI toolkit, is known for its ability to create beautiful and natively compiled applications for mobile, web, and desktop from a single codebase. Managing state effectively is crucial for building scalable and maintainable Flutter applications. Redux, a predictable state container for JavaScript apps, has been adapted for Flutter to provide a centralized state management solution.

What is Redux?

Redux is an open-source JavaScript library for managing and centralizing application state. It is inspired by the functional programming concept of a single, immutable data store that can be modified only through pure functions known as reducers. Redux simplifies state management by providing a clear pattern for data flow.

Why Use Redux in Flutter?

• Centralized State: Manages the entire application state in a single store.
• Predictable State: Changes to the state are predictable, as they go through reducers.
• Easier Debugging: Easier to debug state changes, thanks to the predictable unidirectional data flow.
• Middleware Support: Enables side effects, logging, and asynchronous tasks.
• Scalability: Makes large applications easier to manage and scale.

How to Implement Redux in Flutter

To implement Redux in Flutter, follow these steps:

Step 1: Add Dependencies

Include the necessary Redux dependencies in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  redux: ^5.0.0
  flutter_redux: ^0.8.2
  redux_thunk: ^0.4.0

dev_dependencies:
  flutter_test:
    sdk: flutter

• redux: Core Redux library.
• flutter_redux: Binds Redux to Flutter widgets.
• redux_thunk (Optional): Enables asynchronous actions using thunks.

Run flutter pub get to install the dependencies.

Step 2: Define the State

Create a class to represent your application’s state. This class should be immutable, meaning that its values should not be modified after creation. Use the copyWith method to create a new instance with modified values.

class AppState {
  final int counter;

  AppState({required this.counter});

  AppState copyWith({int? counter}) {
    return AppState(
      counter: counter ?? this.counter,
    );
  }

  factory AppState.initial() {
    return AppState(counter: 0);
  }
}

In this example, the AppState contains a single counter property. The copyWith method creates a new AppState with an updated counter, and AppState.initial() provides an initial state for the application.

Step 3: Create Actions

Define the actions that can be dispatched to modify the state. Actions are simple classes that describe the intention to change the state.

class IncrementAction {}
class DecrementAction {}

In this example, IncrementAction and DecrementAction represent actions to increment and decrement the counter, respectively.

Step 4: Define Reducers

Create a reducer function that takes the current state and an action, and returns a new state. Reducers must be pure functions, meaning that they should not have any side effects and should always return the same output for the same input.

import 'package:redux/redux.dart';

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

In this reducer:

• If the action is IncrementAction, the counter is incremented.
• If the action is DecrementAction, the counter is decremented.
• If the action is not recognized, the original state is returned.

Step 5: Create the Store

Create a Redux store with the initial state and the reducer. The store holds the state and allows actions to be dispatched to update the state.

import 'package:redux/redux.dart';
import 'package:redux_thunk/redux_thunk.dart';

final store = Store(
  appReducer,
  initialState: AppState.initial(),
  middleware: [thunkMiddleware],
);

Here, thunkMiddleware is included for handling asynchronous actions (more on this later).

Step 6: Connect Flutter Widgets to the Store

Use the StoreProvider widget from the flutter_redux package to provide the store to the widget tree. Then, use the StoreConnector to connect widgets to the store and rebuild them whenever the state changes.

import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';

import 'actions.dart';
import 'reducer.dart';
import 'state.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final store = Store(
    appReducer,
    initialState: AppState.initial(),
  );

  @override
  Widget build(BuildContext context) {
    return StoreProvider(
      store: store,
      child: MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Redux Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Counter value:',
            ),
            StoreConnector(
              converter: (store) => store.state.counter.toString(),
              builder: (context, counter) {
                return Text(
                  counter,
                  style: Theme.of(context).textTheme.headlineMedium,
                );
              },
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () => StoreProvider.of(context).dispatch(IncrementAction()),
                  child: Text('Increment'),
                ),
                SizedBox(width: 16),
                ElevatedButton(
                  onPressed: () => StoreProvider.of(context).dispatch(DecrementAction()),
                  child: Text('Decrement'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Key components:

• StoreProvider: Makes the Redux store available to all widgets in the app.
• StoreConnector: Connects the Text widget to the store and rebuilds it whenever the counter value changes. The converter extracts the counter value from the state, and the builder builds the widget with the current value.
• The ElevatedButton widgets dispatch the IncrementAction and DecrementAction when pressed, updating the state in the store.

Step 7: Handling Asynchronous Actions with Redux Thunk (Optional)

For asynchronous tasks, such as fetching data from an API, you can use Redux Thunk middleware. Thunk allows you to dispatch functions instead of actions, enabling you to perform asynchronous operations before dispatching the actual actions.

Step 7.1: Define Asynchronous Actions

import 'package:redux/redux.dart';
import 'package:redux_thunk/redux_thunk.dart';
import 'actions.dart';
import 'state.dart';

ThunkAction incrementAsync() {
  return (Store store) async {
    await Future.delayed(Duration(seconds: 1));
    store.dispatch(IncrementAction());
  };
}

Step 7.2: Dispatch the Thunk Action

ElevatedButton(
  onPressed: () => store.dispatch(incrementAsync()),
  child: Text('Increment Async'),
),

In this example, the incrementAsync action waits for one second and then dispatches the IncrementAction.

Conclusion

Redux provides a powerful way to manage state in Flutter applications. By centralizing the state and enforcing a unidirectional data flow, Redux helps you build predictable, scalable, and maintainable applications. While the initial setup may seem complex, the benefits of using Redux for larger applications are significant. With Redux Thunk, you can also handle asynchronous tasks efficiently, making it a versatile tool for modern Flutter development.