AsyncRedux Sync Actions

Basic Sync Action Structure

A synchronous action returns

AppState?

from its

reduce()

method. The action completes immediately and state updates right away.

class Increment extends ReduxAction<AppState> {
  @override
  AppState? reduce() => state.copy(counter: state.counter + 1);
}

Key Components

Extending ReduxAction

Every action extends

ReduxAction<AppState>

:

class MyAction extends ReduxAction<AppState> {
  @override
  AppState? reduce() {
    // Return new state
  }
}

The

state

Getter

Inside

reduce()

, access current state via the

state

getter:

class ToggleFlag extends ReduxAction<AppState> {
  @override
  AppState? reduce() => state.copy(flag: !state.flag);
}

Passing Parameters via Constructor

Pass data to actions through constructor fields:

class SetName extends ReduxAction<AppState> {
  final String name;
  SetName(this.name);

  @override
  AppState? reduce() => state.copy(name: name);
}

class IncrementBy extends ReduxAction<AppState> {
  final int amount;
  IncrementBy({required this.amount});

  @override
  AppState? reduce() => state.copy(counter: state.counter + amount);
}

Modifying Nested State

For nested state objects, create the new nested object first:

class UpdateUserName extends ReduxAction<AppState> {
  final String name;
  UpdateUserName(this.name);

  @override
  AppState? reduce() {
    var newUser = state.user.copy(name: name);
    return state.copy(user: newUser);
  }
}

Dispatching Sync Actions

From Widgets

Use context extensions:

// Fire and forget
context.dispatch(Increment());

// With parameters
context.dispatch(SetName('Alice'));
context.dispatch(IncrementBy(amount: 5));

Immediate State Update

Sync actions update state immediately:

print(store.state.counter); // 2
store.dispatch(IncrementBy(amount: 3));
print(store.state.counter); // 5

Guaranteed Sync with dispatchSync()

The

dispatchSync()

throws

StoreException

if the action is async. Otherwise, it behaves exactly like

dispatch()

.

Use

dispatchSync()

only in the rare cases when you must ensure the action is synchronous because you need the state to be applied right after the dispatch returns.

context.dispatchSync(Increment());

From Other Actions

Actions can dispatch other actions:

class ResetAndIncrement extends ReduxAction<AppState> {
  @override
  AppState? reduce() {
    dispatch(Reset());
    dispatch(Increment());
    return null; // This action itself doesn't change state
  }
}

Returning Null (No State Change)

Return

null

when you don't need to change state:

class LogCurrentState extends ReduxAction<AppState> {
  @override
  AppState? reduce() {
    print('Current counter: ${state.counter}');
    return null; // No state change
  }
}

Conditional state changes:

class IncrementIfPositive extends ReduxAction<AppState> {
  final int amount;
  IncrementIfPositive(this.amount);

  @override
  AppState? reduce() {
    if (amount <= 0) return null;
    return state.copy(counter: state.counter + amount);
  }
}

Action Simplification with Base Class

Create a base action class to reduce boilerplate:

// Define once
abstract class AppAction extends ReduxAction<AppState> {}

// Use everywhere
class Increment extends AppAction {
  @override
  AppState? reduce() => state.copy(counter: state.counter + 1);
}

class SetName extends AppAction {
  final String name;
  SetName(this.name);

  @override
  AppState? reduce() => state.copy(name: name);
}

You can add shared functionality to your base class:

abstract class AppAction extends ReduxAction<AppState> {
  // Shortcuts to state parts
  User get user => state.user;
  Settings get settings => state.settings;
}

class UpdateEmail extends AppAction {
  final String email;
  UpdateEmail(this.email);

  @override
  AppState? reduce() => state.copy(
    user: user.copy(email: email), // Uses shortcut
  );
}

Return Type Warning

The

reduce()

method signature is

FutureOr<AppState?>

. For sync actions, always return

AppState?

directly:

// CORRECT - Sync action
AppState? reduce() => state.copy(counter: state.counter + 1);

// WRONG - Don't return FutureOr directly
FutureOr<AppState?> reduce() => state.copy(counter: state.counter + 1);

If you return

FutureOr<AppState?>

directly, AsyncRedux cannot determine if the action is sync or async and will throw a

StoreException

.

Complete Example

// State
class AppState {
  final int counter;
  final String name;

  AppState({required this.counter, required this.name});

  static AppState initialState() => AppState(counter: 0, name: '');

  AppState copy({int? counter, String? name}) => AppState(
    counter: counter ?? this.counter,
    name: name ?? this.name,
  );
}

// Base action
abstract class AppAction extends ReduxAction<AppState> {}

// Sync actions
class Increment extends AppAction {
  @override
  AppState? reduce() => state.copy(counter: state.counter + 1);
}

class Decrement extends AppAction {
  @override
  AppState? reduce() => state.copy(counter: state.counter - 1);
}

class IncrementBy extends AppAction {
  final int amount;
  IncrementBy(this.amount);

  @override
  AppState? reduce() => state.copy(counter: state.counter + amount);
}

class SetName extends AppAction {
  final String name;
  SetName(this.name);

  @override
  AppState? reduce() => state.copy(name: name);
}

class Reset extends AppAction {
  @override
  AppState? reduce() => AppState.initialState();
}

// Usage in widget
ElevatedButton(
  onPressed: () => context.dispatch(IncrementBy(5)),
  child: Text('Add 5'),
)

References

URLs from the documentation:

• https://asyncredux.com/flutter/basics/sync-actions
• https://asyncredux.com/flutter/basics/actions-and-reducers
• https://asyncredux.com/flutter/advanced-actions/redux-action
• https://asyncredux.com/flutter/basics/dispatching-actions
• https://asyncredux.com/flutter/basics/action-simplification
• https://asyncredux.com/flutter/basics/changing-state-is-optional