Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iampawan/vxstate
Another state management solution
https://github.com/iampawan/vxstate
dart flutter hacktoberfest hacktoberfest2022
Last synced: 7 days ago
JSON representation
Another state management solution
- Host: GitHub
- URL: https://github.com/iampawan/vxstate
- Owner: iampawan
- License: mit
- Created: 2021-02-08T17:52:38.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-23T13:23:10.000Z (12 months ago)
- Last Synced: 2024-10-19T03:02:20.278Z (20 days ago)
- Topics: dart, flutter, hacktoberfest, hacktoberfest2022
- Language: Dart
- Homepage:
- Size: 254 KB
- Stars: 42
- Watchers: 4
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# VxState
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](https://api.flutter.dev/flutter/widgets/InheritedModel-class.html) widget from Flutter.
## Getting started
Add to your pubpsec:
```yaml
dependencies:
...
vxstate: any
```
Create a store:
```dart
import 'package:vxstate/vxstate.dart';
class MyStore extends VxStore {
int count = 0;
}
```
Define mutations:
```dart
class Increment extends VxMutation {
perform() => store.count++;
}
```
Listen to mutations:
```dart
@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:
```dart
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 {
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: [
Text("Count: ${store.count}"),
RaisedButton(
child: Text("Increment"),
onPressed: () {
// Invoke mutation
Increment();
},
),
],
),
),
);
}
}
```
## Documentation
- 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