useDispatch function

dynamic Function(dynamic action) useDispatch()

This hook returns a reference to the Redux Store.dispatch function.

You may use it to dispatch actions as needed.

If you need to dispatch actions within a custom Context, use createDispatchHook instead.

See the react-redux JS documentation for more details.

Example

This example assumes that your Counter component is rendered as the descendant of a ReduxProvider component that is wired up to a Redux Store instance with a CounterState instance containing a field called count.

It also assumes that you have two actions wired up to your reducer - IncrementAction and DecrementAction.

import 'package:over_react/over_react.dart';
import 'package:over_react/over_react_redux.dart';
import 'counter_state.dart';

mixin CounterProps on UiProps {}

UiFactory<CounterProps> Counter = uiFunction(
  (props) {
    final count = useSelector<CounterState, int>((state) => state.count);
    final dispatch = useDispatch();

    return Dom.div()(
      Dom.div()('The current count is $count'),
      (Dom.button()
        ..onClick = (_) {
          dispatch(IncrementAction());
        }
      )('+'),
      (Dom.button()
        ..onClick = (_) {
          dispatch(DecrementAction());
        }
      )('-'),
    );
  },
  $CounterConfig, // ignore: undefined_identifier
);

Related: useSelector

Implementation

dynamic Function(dynamic action) useDispatch() => _jsUseDispatch();