redux_compact 0.3.1 copy "redux_compact: ^0.3.1" to clipboard
redux_compact: ^0.3.1 copied to clipboard

Reduce the massive amount of boilerplate for Flutter redux application

example/lib/main.dart

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

import 'package:redux_compact/redux_compact.dart';

///////////////////////////////////////////////////////////////////////////////
/// Initialize the store as recommended by Flutter redux
void main() {
  // Create an instance of ReduxCompact reducer and middleware.
  // In this example the AppState is an integer representing a counter
  final compactReducer = ReduxCompact.createReducer<int>();
  final compactMiddleware = ReduxCompact.createMiddleware<int>();

  final store = new Store<int>(
    compactReducer, // <-- Add the reducer
    initialState: 0,
    middleware: [
      compactMiddleware, // <-- Add the middleware
    ],
  );

  runApp(MyApp(
    store: store,
    title: "Redux Compact",
  ));
}

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

  const MyApp({Key? key, required this.store, required this.title})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new StoreProvider<int>(
      store: store,
      child: MaterialApp(
        title: title,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: CounterWidget(),
      ),
    );
  }
}

///////////////////////////////////////////////////////////////////////////////
/// The action increments the counter by [incrementBy]
class IncrementCountAction extends CompactAction<int> {
  final int incrementBy;

  IncrementCountAction(this.incrementBy);

  @override
  int reduce() {
    // The reduce method has access to the store state
    // and instance variables
    return state + incrementBy;
  }
}

///////////////////////////////////////////////////////////////////////////////
/// BaseModel has direct access to the store, state and dispatch function
/// Its a convienent helper class to quickly create a ViewModel
class _VM extends BaseModel<int> {
  final int? count;

  _VM(Store<int> store, {this.count = 0}) : super(store);

  incrementCount() {
    // You can dispatch within the BaseModel
    // or within the Widget with vm.disptach(...)
    dispatch(IncrementCountAction(1));
  }

  @override
  _VM fromStore() {
    // You can access the store's state directly with state
    // or through store.state if you like
    final count = state;
    return _VM(store, count: count);
  }
}

class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<int, _VM>(
      converter: (store) =>
          _VM(store).fromStore(), // <-- Initialize the BaseModel
      builder: (context, vm) => render(context, vm),
    );
  }

  Widget render(BuildContext context, _VM vm) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Redux Compact"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              vm.count.toString(),
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () =>
            vm.incrementCount(), // <-- Dispatch through the BaseModel
        tooltip: "Increment",
        child: new Icon(Icons.add),
      ),
    );
  }
}
8
likes
150
points
191
downloads

Publisher

verified publisherkonstant.is

Weekly Downloads

Reduce the massive amount of boilerplate for Flutter redux application

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter, redux

More

Packages that depend on redux_compact