VxState is a state management library built for Flutter apps with focus on simplicity. It is inspired by StoreKeeper & libraries like Redux, Vuex etc with the power of streams. Here is a basic idea of how it works:
- Single Store (Single source of truth) to keep app's data
- Structured modifications to store with Mutations
- Widgets listen to mutations to rebuild themselves
- Enhance this process with Interceptors and Effects
Core of VxState is based on the InheritedModel widget from Flutter.
Add to your pubpsec:
dependencies:
...
vxstate: anyCreate a store:
import 'package:vxstate/vxstate.dart';
class MyStore extends VxStore {
int count = 0;
}Define mutations:
class Increment extends VxMutation<MyStore> {
perform() => store.count++;
}Listen to mutations:
@override
Widget build(BuildContext context) {
// Define when this widget should re render
VxState.watch(context, on: [Increment]);
// Get access to the store
MyStore store = VxState.store as MyStore;
return Text("${store.count}");
}Complete example:
import 'package:flutter/material.dart';
import 'package:vxstate/vxstate.dart';
// Build store and make it part of app
void main() {
runApp(VxState(
store: MyStore(),
child: MyApp(),
));
}
// Store definition
class MyStore extends VxStore {
int count = 0;
}
// Mutations
class Increment extends VxMutation<MyStore> {
perform() => store.count++;
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Define when this widget should re render
VxState.watch(context, on: [Increment]);
// Get access to the store
MyStore store = VxState.store as MyStore;
return MaterialApp(
home: Scaffold(
body: Column(
children: <Widget>[
Text("Count: ${store.count}"),
RaisedButton(
child: Text("Increment"),
onPressed: () {
// Invoke mutation
Increment();
},
),
],
),
),
);
}
}- VxStore - Where your apps's data is kept
- VxMutation - Logic that modifies Store
- VxBuilder, VxNotifier, VxConsumer - Useful widgets for special cases
- VxEffect - Chained mutations
- VxInterceptors - Intercept execution of mutations
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent