leocavalcante / flutter-redurx

🎯 Flutter bindings for ReduRx.

Please, check out: https://github.com/leocavalcante/observable_state

Flutter-ReduRx

Flutter bindings for ReduRx.

It provides a Provider as an InheritedWidget so you can reach the ReduRx Store wherever you have a BuildContext.
It also has a Connect Widget so you can grab a few parts of the State (sub-state/props) and it will automatically recall builder whenever only this little connected part of the State has changed preventing unnecessary rebuilds.

Getting started

• Tutorial: Handling State in Flutter with ReduRx

API

Connect

• convert: State -> Props - A function used by map to transform the state in a sub-state/props.
• where: Props oldProps, Props newProps -> bool - A function to explicitly filter when the builder should be called.
• builder: Props newProps -> Widget - A function that receives the sub-state/props and returns a Widget.

Connect<State, String>(
  convert: (state) => state.title,
  where: (oldTitle, newTitle) => newTitle != oldTitle,
  builder: (title) => Text(title),
)

Example

class Example1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Connect<AppState, String>(
            convert: (state) => state.title,
            where: (prev, next) => next != prev,
            builder: (title) {
              print('Building title: $title');
              return Text(title);
            },
          ),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have pushed the button this many times:'),
              Connect<AppState, String>(
                convert: (state) => state.count.toString(),
                where: (prev, next) => next != prev,
                builder: (count) {
                  print('Building counter: $count');
                  return Text(count,
                      style: Theme.of(context).textTheme.display1);
                },
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => Provider.dispatch<AppState>(context, Increment()),
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ));
  }
}

Handling null values

By default, Connect will only call builder if the props aren't null, otherwise it renders an empty Container. If you want to handle null values by youself, set the nullable property to true:

Connect<State, String>(
  convert: (state) => state.title,
  where: (oldTitle, newTitle) => newTitle != oldTitle,
  builder: (title) => Text(title),
  nullable: true,
)

ConnectWidget

Behaves just like Connect but is extendable. Very useful when you see yourself in a Widget with a lot of Connects.

Example

class _Props {
  _Props({
    @required this.title,
    @required this.count,
  });

  final String title;
  final String count;
}

class Example2 extends ConnectWidget<AppState, _Props> {
  @override
  _Props convert(AppState state) {
    return _Props(title: state.title, count: state.count.toString());
  }

  @override
  Widget build(BuildContext context, _Props props) {
    return Scaffold(
      appBar: AppBar(title: Text(props.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(props.count, style: Theme.of(context).textTheme.display1),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => dispatch(context, Increment()),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Provider

• store - A ReduRx Store.
• child - Your application's Widget.
• static dispatch<S>(BuildContext, ActionType) - Helper to call dispatch on the Provider's context Store.

Provider(
  store: Store<State>(State('Initial title')),
  child: App(),
)

Provider.dispatch<State>(context, ChangeTitle('New title'));

For a better understanding of dispatch and ActionType head to ReduRx.

Example

import 'package:flutter/material.dart' hide State;
import 'package:flutter_redurx/flutter_redurx.dart';

class State {
  State({this.title, this.count});
  final String title;
  final int count;
}

class Increment extends Action<State> {
  @override
  State reduce(State state) =>
      State(title: state.title, count: state.count + 1);
}

void main() {
  final store =
      Store<State>(State(title: 'Flutter-ReduRx Demo Title', count: 0));
  runApp(Provider(store: store, child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter-ReduRx Demo',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Connect<State, String>(
            convert: (state) => state.title,
            where: (prev, next) => next != prev,
            builder: (title) => Text(title ?? ''),
          ),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have pushed the button this many times:'),
              Connect<State, String>(
                convert: (state) => state.count.toString(),
                where: (prev, next) => next != prev,
                builder: (count) => Text(count ?? '',
                    style: Theme.of(context).textTheme.display1),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => Provider.dispatch<State>(context, Increment()),
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ));
  }
}

flutter-redurx's Issues

Use Provider as a Dependency Injector

add `@required` annotation to those parameters which is actually required

When I use Connect, I often forgot to add parameter where, and lead to nothing showed, if the where is actually required, then add the @required annotation.

Access State directly from Provider

Default widget builder returns Container()

Hi,

The default widget builder for ReduRx returns a Container() for null data - this causes two problems:

1. Sometimes Flutter expects a RenderSliver instead of a RenderBox, so this implementation throws a framework error when the appropriate 'empty' widget should be SliverFillRemaining();

2. Returning Container() assumes that the developer doesn't want to use null as a check for other build logic.

Would it be possible to make the following change?

@override Widget build(BuildContext context) { return StreamBuilder<P>( stream: _stream, builder: (context, snapshot) { if (snapshot.data == null && !nullable) { return Container(); } _prev = snapshot.data; return builder(_prev); }, ); }

====>

@override Widget build(BuildContext context) { return StreamBuilder<P>( stream: _stream, builder: (context, snapshot) { _prev = snapshot.data; return builder(_prev); }, ); }

Base practice for dispatch a navigation action and show snack bar action?

Any suggestions? Thanks.

`AsyncAction` bug

Dispatch an AsyncAction invokes the middleware's beforeAction method twice.I tweak a little on your example:

import 'dart:async';

import 'package:flutter/material.dart' hide State;
import 'package:flutter_redurx/flutter_redurx.dart';

class State {
  State({this.title, this.count});
  final String title;
  final int count;
}

/***************** tweaked ****************/
class Increment extends AsyncAction<State> {
  @override
  Future<Computation<State>> reduce(State state) async {
    print('in action: Increment: $state');
    return (State state) => State(title: state.title, count: state.count + 1);
  }
}
/***************** tweaked ****************/

void main() {
  /***************** tweaked ****************/
  final store =
      Store<State>(State(title: 'Flutter-ReduRx Demo Title', count: 0))
          .add(LogMiddleware());
  /***************** tweaked ****************/
  runApp(Provider(store: store, child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter-ReduRx Demo',
      theme: ThemeData(primarySwatch: Colors.pink),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Connect<State, String>(
          convert: (state) => state.title,
          where: (prev, next) => next != prev,
          builder: (title) {
            print('Building title: $title');
            return Text(title);
          },
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Connect<State, String>(
              convert: (state) => state.count.toString(),
              where: (prev, next) => next != prev,
              builder: (count) {
                print('Building counter: $count');
                return Text(count, style: Theme.of(context).textTheme.display1);
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => Provider.dispatch<State>(context, Increment()),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

This will output

12:40:44.015 1 info flutter.tools flutter: Before action: Increment: Instance of 'State'
12:40:44.015 2 info flutter.tools flutter: in action: Increment: Instance of 'State'
12:40:44.015 3 info flutter.tools flutter: Before action: Increment: Instance of 'State'
12:40:44.015 4 info flutter.tools flutter: After action: Increment: Instance of 'State'
12:40:44.038 5 info flutter.tools flutter: Building counter: 1

Unable to respond to null to non-null state changes and vice versa

On this line it seems that a builder won't be invoked if the sub-state we're monitoring from a widget is null:

Flutter-ReduRx/lib/flutter_redurx.dart

Line 72 in f693c40

return Container();

Here's my use case:

• I have a widget representing some object in a list of objects
• When the user touches down, I change a field highlightedObject in the app state via Action dispatch to match the object represented by the item
• I then want my widget to rebuild with a different visual style if the object it represents matches the highlightedObject in the app state, so I've wrapped it in a Connector that converts using the state's highlightedObject

And what happens:

• The initial highlightedObject is null, so the Connector for my object widget doesn't call the builder I provided — so no widgets in my list are shown

Is this by design? Thanks!