flutter_hooks_async_redux 3.2.0 copy "flutter_hooks_async_redux: ^3.2.0" to clipboard
flutter_hooks_async_redux: ^3.2.0 copied to clipboard

Combines flutter_hooks and async_redux packages to add Redux to flutter_hooks

example/lib/main.dart

import 'package:async_redux/async_redux.dart';
import 'package:flutter/material.dart' hide Action;
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
import 'package:flutter_hooks_async_redux/flutter_hooks_async_redux.dart';

class AppState {
  final int counter;

  const AppState({this.counter = 0});
}

T useAppState<T>(
  T Function(AppState state) converter, {
  bool distinct = true,
}) =>
    useSelector<AppState, T>(converter, distinct: distinct);

void main() {
  runApp(
    MaterialApp(
      home: StoreProvider<AppState>(
        store: Store<AppState>(initialState: const AppState()),
        child: const Application(),
      ),
    ),
  );
}

class Application extends HookWidget {
  const Application({super.key});

  @override
  Widget build(BuildContext context) {
    final dispatch = useDispatch();
    int counter = useAppState((state) => state.counter);
    var isWaitingIncrement = useIsWaiting(IncrementAction);

    useEffect(() {
      dispatch(SetCounter(42));

      return;
    }, []);

    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.dark.copyWith(
        systemNavigationBarColor: Colors.transparent,
        systemNavigationBarContrastEnforced: false,
      ),
      child: Scaffold(
        body: Center(
          child: Text('Counter is $counter'),
        ),
        floatingActionButton: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            FloatingActionButton(
              disabledElevation: 0,
              onPressed:
                  isWaitingIncrement ? null : () => dispatch(IncrementAction()),
              child: isWaitingIncrement
                  ? const CircularProgressIndicator()
                  : const Icon(Icons.add),
            ),
            const SizedBox(height: 12),
            FloatingActionButton(
              child: const Icon(Icons.clear),
              onPressed: () {
                dispatch(ResetCounter());
              },
            ),
          ],
        ),
      ),
    );
  }
}

class IncrementAction extends ReduxAction<AppState> {
  @override
  Future<AppState?> reduce() async {
    await Future.delayed(const Duration(milliseconds: 500));
    return AppState(counter: state.counter + 1);
  }
}

class SetCounter extends ReduxAction<AppState> {
  final int value;

  SetCounter(this.value);

  @override
  AppState reduce() => AppState(counter: value);
}

class ResetCounter extends ReduxAction<AppState> {
  @override
  AppState reduce() {
    return const AppState();
  }
}
5
likes
150
points
844
downloads

Publisher

verified publisherglasberg.dev

Weekly Downloads

Combines flutter_hooks and async_redux packages to add Redux to flutter_hooks

Repository (GitHub)

Topics

#redux #hooks #state-management

Documentation

API reference

License

MIT (license)

Dependencies

async_redux, flutter, flutter_hooks

More

Packages that depend on flutter_hooks_async_redux