DEV Community: Charles Crete

Flutter Super State: Simple State Management for Flutter

Charles Crete — Thu, 07 May 2020 22:53:24 +0000

flutter_super_state is a new state management library for Flutter which:

Is simple to use. Simply create modules
Supports async actions easily
Can easily be integrated with Flutter

Today we will take a look at creating a simple application with a mock authentication and a counter.

Concepts

Super State has 2 main objects:

Store: Which holds all of your modules
StoreModule: Which you can extend to implement modules

Let's take a look at a simple module:

import 'package:flutter_super_state/flutter_super_state.dart';

// Modules extend `StoreModule`
class CounterModule extends StoreModule {
  // Read only property, to avoid accidentally setting `counter` without calling `setState`
  int get counter => _counter;
  var _counter = 0;

  // This automatically registers your module to your store
  CounterModule(Store store): super(store);

  // Synchronous actions
  void increment() {
    setState(() {
      _counter++;
    });
  }

  void decrement() {
    setState(() {
      _counter--;
    });
  }

  // Asynchronous action
  Future<void> reset() async {
    // Fake async delay
    await Future.delayed(Duration(milliseconds: 10));

    setState(() {
      _counter = 0;
    });
  }
}

A store is easy to setup, here's an example:

import 'package:flutter_super_state/flutter_super_state.dart';

final store = Store();

// Register modules. Order does not matter. You should register all modules on initialization
CounterModule(store);

You can then call get modules from the store and call actions:

store.getModule<CounterModule>().increment();

await store.getModule<CounterModule>().reset();

For Flutter integration, the package provides for following widgets:

StoreProvider: Provides the store to all children in sub-tree
ModuleBuilder: Access a module inside the Flutter widget tree (is updated when module calls setState)
StoreBuilder: Access the store inside the Flutter widget tree (is updated when any module calls setState)

Example

Let's start by creating a new project using flutter create super_state_example and adding the package to pubspec.yaml:

dependencies:
  flutter_super_state: # Optionally put latest version from pub.dev

Next, let's clear your main.dart, and place our CounterModule from above inside lib/src/store/counter.dart. Let's create our second module, AuthModule (inside lib/src/store/auth.dart):

import 'package:flutter_super_state/flutter_super_state.dart';
import 'package:state_test/src/store/counter.dart';

class AuthModule extends StoreModule {
  int get isLoggedIn => isLoggedIn;
  var _isLoggedIn = false;

  AuthModule(Store store) : super(store);

  Future<void> login() async {
    // Do network request...
    await Future.delayed(Duration(milliseconds: 100));

    setState(() {
      _isLoggedIn = true;
    });
  }

  Future<void> logout() async {
    // Do network request...
    await Future.delayed(Duration(milliseconds: 100));

    setState(() {
      _isLoggedIn = true;
    });

    // Call action in other module
    await store.getModule<CounterModule>().reset();
  }
}

We should have our modules complete! Next, let's setup 2 screens (LoginScreen and CounterScreen):

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Login"),
      ),
      body: Center(
        // Login button
        child: ModuleBuilder<AuthModule>(
          builder: (context, authModule) {
            return RaisedButton(
              child: Text("Login"),
              onPressed: () async {
                // Call action
                await authModule.login();
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(builder: (context) => CounterScreen()),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Counter"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          // Our counter module
          ModuleBuilder<CounterModule>(
            builder: (context, counterModule) {
              return Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    child: Text("Increment"),
                    onPressed: () => counterModule.increment(),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    child: Text(counterModule.counter.toString()),
                  ),
                  RaisedButton(
                    child: Text("Decrement"),
                    onPressed: () => counterModule.decrement(),
                  ),
                ],
              );
            },
          ),
          // Logout button
          ModuleBuilder<AuthModule>(
            builder: (context, authModule) {
              return RaisedButton(
                child: Text("Logout"),
                onPressed: () async {
                  await authModule.logout();
                  Navigator.pushReplacement(
                    context,
                    MaterialPageRoute(builder: (context) => LoginScreen()),
                  );
                },
              );
            },
          ),
        ],
      ),
    );
  }
}

Next, let's setup our main.dart:

void main() {
  // Create the store
  final store = Store();

  // Register modules
  CounterModule(store);
  AuthModule(store);

  // Provide store to whole application
  runApp(StoreProvider(
    store: store,
    child: ExampleApp(),
  ));
}

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginScreen(),
    );
  }
}

And we are done! Let's check it out:

You can view the whole project here.

Thanks for reading, don't forget to check out the package!

Routex v1.0.0: Modern Node Router

Charles Crete — Sun, 12 Apr 2020 04:34:23 +0000

Today I have the pleasure to release Routex v1.0.0, after a year of testing and improvements. It now has a list of first-party packages for common uses, such as a body-parser, cookies, and hooks (to be talked in another article!)

Routex is a Node router designed with modern features such as async/await and TypeScript in mind. Its API surface is small and uses few dependencies itself. I now consider it production-ready after using it for many months.

Let's look at a couple of examples and use-cases for Routex, first with the installation.

yarn add routex
# or
npm install routex

Next up, we can create our entry point (using TypeScript here)

import { JsonBody, Routex, TextBody, ICtx } from "routex";

// Port will be parsed if a string
const port = process.env.PORT || 3000;

// Create the application
const app = new Routex();

// Setup a GET route on /
app.get("/", () => {
  // Returning a body, in this case text 
  return new TextBody("Hello world!");
});

// Adding parameters to a route. Notice how `/` can be before or after?
app.get("/:name", (ctx: ICtx) => {
  // Using the `ctx` object to get data, and return some JSON
  return new JsonBody({ hello: ctx.params.name });
});

// Start the server
app.listen(port).then(() => console.log(`Listening on ${port}`));

This is a simple example server, but what about middlewares?

import { ICtx, ErrorWithStatusCode } from "routex";

function authMiddleware(ctx: ICtx) {
  if(!ctx.headers.authorization) {
    throw new ErrorWithStatusCode(400, "Not authorized");
  }
}

// Global
app.middleware(authMiddleware);

// Route
app.get("/", [authMiddleware, handler]);

As you see, errors are used a flow control, making it stop the execution of the request at any point. Error display can be controlled using app.errorHandler

Request data also now has a place to live, inside ctx.data. No more req.user:

async function authMiddleware(ctx: ICtx) {
  // ...

  const user = await getUser();
  ctx.data.user = user;
}

app.get("/", [
  authMiddleware, 
  (ctx: ICtx) => {
    return new JsonBody({ name: ctx.data.user.name });
  },
]);

All middlewares and handlers can use async/await with native support.

What about the vast ecosystem of Express middlewares? Worry not, as Routex comes with the useExpress wrapper, making it easy to use most Express middlewares with no effort:

import { useExpress } from "routex";
import cors from "cors";

app.middleware(useExpress(cors()));

Now that Routex v1.0.0 is released, I am excited to share it with you and get feedback (please open an issue!).

You can see more of Routex at routex.js.org or view the project on GitHub.