redux_future_middleware 0.2.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 50

Redux Future Middleware (Dart/Flutter) #

Pub Build Status codecov

Redux middleware package for handling Dart Futures by creating a FutureAction.

The futureMiddleware can be attached to the Redux store upon construction.

Once attached, you can store.dipatch the FutureAction, and the futureMiddleware will intercept it.

  • If the Future passed in FutureAction completes successfully, a FutureSuccessAction will be dipatched with the result of the Future.
  • If the Future passed in FutureAction fails, a FutureErrorAction will be dispatched containing the error that was returned.
  • When the FutureAction is dipatches, a FuturePendingAction is dispatched from the futureMiddleware for consumption by the Reducer.

Usage: #

main() {
    // First, create an action to uniquely identify each FutureAction from others.
    class ExampleAction {}

    // Then, create a reducer that knows how to handle the future actions
    String exampleReducer(String state, dynamic action) {
        if (action is FuturePendingAction<ExampleAction>) {
            return 'Fetching';
        } else if (action is FutureSuccessAction<ExampleAction, String>) {
            return action.payload;
        } else if (action is FutureErrorAction<ExampleAction>) {
            return action.error.toString();
        }

        return state;
    }

    // Next, create a store that includes `futureMiddleware`. It will
    // intercept all `FutureAction` that are dispatched.
    final store = Store(
        exampleReducer,
        middleware: [futureMiddleware],
    );

    // Next, dispatch `FutureAction` for intercepting.
    store.dipatch(FutureAction<ExampleAction, String>(
        future: Future.value('Hi')));
}

Credits: #

v0.2.0 #

  • Redux version bump to 4.0.0
  • Documented APIs

v0.1.0+1 #

Initial Release

example/lib/main.dart

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

class Increment {}

int counterReducer(int state, dynamic action) {
  if (action is FutureSuccessAction<Increment, int>) {
    return state + 1;
  }

  return state;
}

void main() {
  final store = Store<int>(counterReducer,
      initialState: 0, middleware: [futureMiddleware]);

  runApp(MyApp(
    store: store,
  ));
}

class MyApp extends StatelessWidget {
  final Store<int> store;

  MyApp({@required this.store});

  @override
  Widget build(BuildContext context) {
    return StoreProvider<int>(
      store: store,
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({this.title});

  @override
  Widget build(BuildContext context) {
    return StoreConnector<int, CounterViewModel>(
        converter: (store) => CounterViewModel.fromStore(store),
        builder: (context, viewModel) {
          return Scaffold(
              appBar: AppBar(
                title: Text(title),
              ),
              body: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      'You have pushed the button this many times:',
                    ),
                    Text(
                      '${viewModel.counterValue}',
                      style: Theme.of(context).textTheme.display1,
                    ),
                  ],
                ),
              ),
              floatingActionButton: FloatingActionButton(
                onPressed: viewModel.callback,
                tooltip: 'Increment',
                child: Icon(Icons.add),
              ));
        });
  }
}

class CounterViewModel {
  int counterValue;
  VoidCallback callback;

  CounterViewModel({this.counterValue, this.callback});

  factory CounterViewModel.fromStore(Store<int> store) {
    return CounterViewModel(
      counterValue: store.state,
      callback: () => store.dispatch(
        FutureAction<Increment, int>(
          future: Future.delayed(
            Duration(seconds: 2),
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  redux_future_middleware: ^0.2.0

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:redux_future_middleware/redux_future_middleware.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
50
Learn more about scoring.

We analyzed this package on Mar 30, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
meta ^1.1.6 1.1.8
redux ^4.0.0 4.0.0
Dev dependencies
test ^1.9.4
test_coverage ^0.4.0