A light state management with React syntax.
By using Reactter you get:
Features
- Use familiarized syntax such as UseState, UseEffect, UseContext, Custom hooks and more.
- Create custom hooks to reuse functionality.
- Reduce significantly boilerplate code.
- Improve code readability.
- Unidirectional data flow.
- An easy way to share global information in the application.
Usage
UseState
You can also create any other classes and set an UseState prop to share the state.
But if you want reactive widgets you need to use ReactterContext or pass this prop to a ReactterContext.
See Custom Hooks for an example.
UseEffect
AppContext(){
UseEffect((){
userName.value = firstName + lastName;
}, [firstName, lastName]);
}
It should be used inside a ReactterContext constructor.
UseProvider and UseContext
Reading values
As you can see, in the example above, you can read the value from context in three different ways:
context.of<AnyContext>(): Get all the states listeners of context.context.of<AnyContext>((ctx) => [ctx.anyState]): Get the listener of an specific state to rebuild, you can use as many you need.context.ofStatic<AppContext>(): Read all the states, but no rebuild when change.
UseAsyncState
You can execute resolve() wherever you want.
UseAsyncState.when
<AnyAsyncState>.when receives four functions an always return a widget to handle the view depending from the status of the state:
standby: When the state has the initial value.loading: When the request for the state is retrieving the value.done: When the request is done.error: If any errors happens in the request.
Custom hooks
You can use it like this:
class UserContext extends ReactterContext with UseCart {
final user = Global.currentUser;
UserContext() {
UseEffect(() {
cart.value = api.getUserCart(user.value?.id ?? 0);
}, [user]);
}
}
We recommend to use mixins for create hooks due the ease of injecting variables, but any class that extends from ReactterHook can be a Custom hook.
Lifecycle methods on ReactterContext:
@override
awake() {}
@override
willMount() {}
@override
didMount() {}
@override
willUnmount() {}
All the ReacterContext has this lifecycle methods:
awake: Executes when the instance starts building.willMount: Executes before the dependency widget will mount in the tree.didMount: Executes after the dependency widget did mount in the tree.willUnmount: Executes when the widget removes from the tree.
Roadmap
We are working in a documentation page aswell creating Youtube tutorials.
We want keeping adding features for Reactter, those are some we have in mind order by priority:
V2
- Tests
- Make
Reacttereasy to test.
- Make
- Creates
- Have the option for create same instances from a context with different ids, usefull for lists of widgets where each widget goint to have his own state.
- Lazy UseContext
- Don’t initialize a context until you will need it.
- Child widget optional for render
- Save a child which won’t re-render when the state change.
- ReactterComponent
- A StatelessWidget who going to expose a
ReactterContextstate for all the widget, without needing to writecontext.of<T>(), juststate.someProp.
- A StatelessWidget who going to expose a
- Equatable
- For remove the prop
alwaysUpdatein state when you are working with Objects or List.
- For remove the prop
ReactterComponents (new package)
- Buttons (Almost ready for release)
- App Bars
- Bottom Bars
- Snackbars
- Drawers
- Floating actions
- Modals
- Inputs
WARNING:
Reactter has just left development status, you can use it in production with small applications but with caution, we are working to make it more testable and consider all possible situations of state management. The API could changes in the future due the Roadmap.
Contribute
If you want to contribute don’t hesitate to create an issue or pull-request in Reactter repository.
You can:
- Add a new custom hook.
- Add a new widget.
- Add examples.
- Report bugs.
- Report situations difficult to implement.
- Report an unclear error.
- Report unclear documentation.
- Write articles or make videos teaching how to use Reactter.
Any idea is welcome!
