useReducerLazy

External Documentation

ReducerHook<TState, TAction> useReducerLazy<TState, TAction, TInit>(

  1. TState reducer(
    1. TState state,

    2. TAction action
    ),
  2. TInit initialArg,
  3. TState init(
    1. TInit
    )
)

Initializes state of a function component to init(initialArg) and creates dispatch method.

Example:

Map<String, dynamic> initializeCount(int initialValue) {
  return {'count': initialValue};
}

Map<String, dynamic> reducer(
Map<String, dynamic> state,
Map<String, dynamic> action,
) {
switch (action['type']) {
case 'increment':
return {...state, 'count': state['count'] + 1};
case 'decrement':
return {...state, 'count': state['count'] - 1};
case 'reset':
return initializeCount(action['payload']);
default:
return state;
}
}


final MyComponent = registerFunctionComponent((props) {
final state = useReducerLazy(
reducer,
props['initialCount'],
initializeCount,
);


return div(children: [
pEl('Count: ${state.state['count']}'),
button(
text: '+',
onClick: () => state.dispatch({'type': 'increment'}),
),
button(
text: 'Reset',
onClick: () => state.dispatch({
'type': 'reset',
'payload': props['initialCount'],
}),
),
]);
});

Implementation

ReducerHook<TState, TAction> useReducerLazy<TState, TAction, TInit>(
  TState Function(TState state, TAction action) reducer,
  TInit initialArg,
  TState Function(TInit) init,
) {
  JSAny? jsReducer(JSAny? jsState, JSAny? jsAction) {
    final dartState = jsState.dartify() as TState;
    final dartAction = jsAction.dartify() as TAction;
    final newState = reducer(dartState, dartAction);
    return (newState == null) ? null : (newState as Object).jsify();
  }

JSAny? jsInit(JSAny? jsArg) {
final dartArg = jsArg.dartify() as TInit;
final state = init(dartArg);
return (state == null) ? null : (state as Object).jsify();
}


final jsInitialArg = (initialArg == null)
? null
: (initialArg as Object).jsify();


final result = _reactUseReducer(jsReducer.toJS, jsInitialArg, jsInit.toJS);
final state = result[0].dartify() as TState;
final dispatch = result[1]! as JSFunction;


return ReducerHook._(state, (action) {
dispatch.callAsFunction(null, action.jsify());
});
}