flutter_hooks_async_redux 1.0.0 flutter_hooks_async_redux: ^1.0.0 copied to clipboard
Combines flutter_hooks and async_redux packages to add Redux to flutter_hooks
Adds Redux to Flutter Hooks #
This package uses flutter_hooks and async_redux packages to add Redux to flutter_hooks.
You have to add the following dependencies to your pubspec.yaml
:
dependencies:
flutter_hooks: ^0.20.5 # or newer
async_redux: ^22.4.0 # or newer
flutter_hooks_async_redux: ^1.0.0 # or newer
And then, all features of Flutter Hooks and Async Redux are available for you, including the ones provided by this package, as described below.
useSelector #
useSelector
lets you select a part of the state and subscribe to updates.
You should give it a function that gets the sate and returns only the part of the state that the widget needs.
Example:
String username = useSelector<AppState, String>((state) => state.username);
Note: If your state is called AppState
, you can define your own useAppState
hook,
like this:
T useAppState<T>(T Function(AppState state) converter, {bool distinct = true}) =>
useSelector<T, AppState>(converter, distinct: distinct);
This will simplify the use of the hook, like this:
String username = useAppState((state) => state.username);
useDispatch, useDispatchSync, and useDispatchAndWait #
Dispatch useDispatch() => useContext().dispatch;
/// Dispatch an action without a StoreConnector.
/// Note: It's efficient to use this, as Widgets that using this will NOT necessarily rebuild
/// whenever the state changes.
DispatchSync useDispatchSync() => useContext().dispatchSync;
/// Dispatch an action without a StoreConnector.
/// Note: It's efficient to use this, as Widgets that using this will NOT necessarily rebuild
/// whenever the state changes.
DispatchAndWait useDispatchAndWait() => useContext().dispatchAndWait;
You can use it to dispatch actions from your widgets:
var dispatch = useDispatch();
dispatch(MyAction());
useIsWaiting #
You can use isWaiting
and pass it actionOrActionTypeOrList
to check if:
- A specific async ACTION is currently being processed.
- An async action of a specific TYPE is currently being processed.
- If any of a few given async actions or action types is currently being processed.
If you wait for an action TYPE, then it returns false when:
- The ASYNC action of the type is NOT currently being processed.
- If the type is not really a type that extends
ReduxAction
. - The action of the type is a SYNC action (since those finish immediately).
If you wait for an ACTION, then it returns false when:
- The ASYNC action is NOT currently being processed.
- If the action is a SYNC action (since those finish immediately).
Trying to wait for any other type of object will return null and throw
a StoreException
after the async gap.
Examples:
var dispatch = useDispatch();
var isWaiting = useIsWaiting();
// Waiting for an action TYPE:
dispatch(MyAction());
if (isWaiting(MyAction)) { // Show a spinner }
// Waiting for an ACTION:
var action = MyAction();
dispatch(action);
if (isWaiting(action)) { // Show a spinner }
// Waiting for any of the given action TYPES:
dispatch(BuyAction());
if (isWaiting([BuyAction, SellAction])) { // Show a spinner }
useFailed #
Usage:
var (isFailed, exceptionFor, clearExceptionFor) = useFailed();
You use it like this:
// Returns true if the action failed with an UserException:
if (isFailed(MyAction)) { // Show an error message. }
// Returns the `UserException` of the action that failed.
if (isFailed(MyAction)) Text(exceptionFor(MyAction)!.reason ?? '');
// Removes the given action from the list of action types that failed.
clearExceptionFor(MyAction);
Note: These functions accept a ReduxAction
, an action Type
, or
an Iterable
of action types. Any other type of object won't work.
Note you can also use useIsFailed
, useExceptionFor
and useClearExceptionFor
separately, if you prefer:
var isFailed = useIsFailed();
var exceptionFor = useExceptionFor();
var clearExceptionFor = useClearExceptionFor();