createSelectorHook<TReduxState> function

_SelectorFnHook<TReduxState> createSelectorHook<TReduxState>([ Context? context ])

Returns a function that can be named and used as a replacement for useSelector when you want to use custom context.

This is useful if you're building a complex reusable component, and you don't want your Store to collide with any Redux Store your consumers' applications might use.

See the react-redux JS documentation for more details.

Custom Context Example

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

// ------------------------------------
//  1. Declare the custom context
// ------------------------------------
final MyContext = createContext();
final useSelector = createSelectorHook<MyState>(MyContext);
final myStore = Store(myReducer);

// ------------------------------------
//  2. Create a function component that
//  uses the shadowed `useSelector`.
// ------------------------------------
mixin MyComponentProps on UiProps {}

UiFactory<MyComponentProps> MyComponent = uiFunction(
  (props) {
    final count = useSelector((state) => state.count);

    return Dom.div()('The current count is $count');
  },
  $MyComponentConfig, // ignore: undefined_identifier
);

// ------------------------------------
//  3. Render the function component
//  nested within the ReduxProvider
//  that is wired up to the
//  custom context / store.
// ------------------------------------
main() {
  final app = (ReduxProvider()
    ..context = MyContext
    ..store = myStore
  )(
    MyComponent()(),
  );

  react_dom.render(app, querySelector('#id_of_mount_node'));
}

Implementation

_SelectorFnHook<TReduxState> createSelectorHook<TReduxState>([Context? context]) {
  final jsHook = _jsCreateSelectorHook(context?.jsThis ?? JsReactRedux.ReactReduxContext);
  TValue dartHook<TValue>(
    TValue Function(TReduxState state) selector, [
    bool Function(TValue tNextValue, TValue tPrevValue)? equalityFn,
  ]) {
    Object? /*[1]*/ jsSelector(Object? /*[1]*/ jsState) =>
        DartValueWrapper.wrapIfNeeded(selector(DartValueWrapper.unwrapIfNeeded(jsState)));
    _JsReduxStateEqualityFn? jsEqualityFn = equalityFn == null
        ? null
        : allowInterop((nextJsValue, prevJsValue) =>
            equalityFn(DartValueWrapper.unwrapIfNeeded(nextJsValue), DartValueWrapper.unwrapIfNeeded(prevJsValue)));

    if (jsEqualityFn == null) {
      return DartValueWrapper.unwrapIfNeeded(jsHook(allowInterop(jsSelector)));
    } else {
      return DartValueWrapper.unwrapIfNeeded(jsHook(allowInterop(jsSelector), jsEqualityFn));
    }
  }

  return dartHook;
}