test: useDispatch hook

src/createContext.ts

@@ -11,6 +11,17 @@ function createUnimplemented(objectName?: string): (m: string) => () => never {
     };
 }
 
+export function createContextWithValue<S, T extends string, P>(
+    value: Partial<ContextValue<S, T, P>>,
+): Context<S, T, P> {
+    return React.createContext<ContextValue<S, T, P>>({
+        dispatch: (a) => a,
+        getState: () => value.state,
+        reducer: (s) => s,
+        ...value,
+    } as ContextValue<S, T, P>);
+}
+
 export function createContext<S, T extends string, P>(
     rootReducer: Reducer<S, T, P>,
     preloadedState: S,
@@ -19,10 +30,8 @@ export function createContext<S, T extends string, P>(
     global = false,
 ): Context<S, T, P> {
     const unimplemented = createUnimplemented(`Context(${displayName ?? ""})`);
-    const Context = React.createContext<ContextValue<S, T, P>>({
-        dispatch: (a) => a,
+    const Context = createContextWithValue({
         enhancer,
-        getState: () => preloadedState,
         reducer: rootReducer,
         state: preloadedState,
         [SymbolObservable]: unimplemented(SymbolObservable.toString()),

src/hooks/useDispatch.ts

@@ -3,13 +3,18 @@ import { bindActionCreator } from "../utils/bindActionCreators";
 import { GlobalContext } from "..";
 
 export function useDispatch<S, T extends string, P>(
-    actionCreator: ActionCreator<T, P>,
+    actionCreator: Nullable<ActionCreator<T, P>>,
     Context?: Context<S, T, P>,
 ): (...args: P[]) => void {
     const { dispatch } = React.useContext(Context ?? GlobalContext);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    return React.useCallback(bindActionCreator(actionCreator, dispatch), [
-        actionCreator,
-        dispatch,
-    ]);
+    const boundActionCreator = React.useMemo(
+        () => bindActionCreator(actionCreator, dispatch),
+        [actionCreator, dispatch],
+    );
+    if (!boundActionCreator) {
+        throw new Error(
+            `Unable to bind action creator "${actionCreator}" to disptch`,
+        );
+    }
+    return React.useCallback(boundActionCreator, [boundActionCreator]);
 }

src/hooks/useSelector.ts

@@ -2,9 +2,9 @@ import * as React from "react";
 import { GlobalContext } from "..";
 
 export function useSelector<S, R, T extends string, P>(
-    selector: Selector<S, R, T, P> | undefined,
+    selector: Nullable<Selector<S, R, T, P>>,
     Context?: Context<S, T, P>,
-): R | undefined {
+): Nullable<R> {
     const { state } = React.useContext(Context ?? GlobalContext);
     return React.useMemo(
         function select() {

src/utils/bindActionCreators.ts

@@ -1,9 +1,10 @@
 // github.com/reduxjs/redux/blob/208d7f1/src/bindActionCreators.ts
 
 export function bindActionCreator<T extends string, P>(
-    actionCreator: ActionCreator<T, P>,
+    actionCreator: Nullable<ActionCreator<T, P>>,
     dispatch: ContextDispatch<T, P>,
-): ActionDispatcher<T, P> {
+): Nullable<ActionDispatcher<T, P>> {
+    if (typeof actionCreator !== "function") return;
     return function dispatchAction(...args: P[]): void {
         dispatch(actionCreator(...args));
     };
@@ -15,23 +16,18 @@ export function bindActionCreator<T extends string, P>(
  * may be invoked directly.
  */
 export function bindActionCreators<T extends string, P>(
-    actionCreator: ActionCreator<T, P>,
-    dispatch: ContextDispatch<T, P>,
-): ActionDispatcher<T, P>;
-
-export function bindActionCreators<T extends string, P>(
-    actionCreator: ActionCreator<T, P>,
+    actionCreator: Nullable<ActionCreator<T, P>>,
     dispatch: ContextDispatch<T, P>,
 ): ActionDispatcher<T, P>;
 
 export function bindActionCreators<T extends string, P, S>(
-    actionCreators: ActionCreatorMapping<T, P, S>,
+    actionCreators: Nullable<ActionCreatorMapping<T, P, S>>,
     dispatch: ContextDispatch<T, P>,
 ): ActionDispatcherMapping<T, P>;
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function bindActionCreators(
-    actionCreators: ActionCreator | ActionCreatorMapping,
+    actionCreators: Nullable<ActionCreator | ActionCreatorMapping>,
     dispatch: ContextDispatch,
 ) {
     if (typeof actionCreators === "function") {
@@ -49,12 +45,9 @@ export function bindActionCreators(
 
     const boundActionCreators: ActionDispatcherMapping = {};
     for (const key in actionCreators) {
-        const actionCreator = actionCreators[key];
-        if (typeof actionCreator === "function") {
-            boundActionCreators[key] = bindActionCreator(
-                actionCreator,
-                dispatch,
-            );
+        const bound = bindActionCreator(actionCreators[key], dispatch);
+        if (bound) {
+            boundActionCreators[key] = bound;
         }
     }
     return boundActionCreators;

src/utils/combineSelectors.ts

@@ -8,7 +8,7 @@ export function combineSelectors<
 >(
     duckName: N,
     selectors?: SelectorMapping<S, R, T, P, Q>,
-): SelectorMapping<S, R, T, P, Q> | undefined {
+): Nullable<SelectorMapping<S, R, T, P, Q>> {
     if (!selectors) return;
     const duckSelectors = {} as SelectorMapping<S, R, T, P, Q>;
     for (const s of Object.keys(selectors) as Q[]) {

src/utils/connect.tsx

@@ -16,7 +16,7 @@ function isFunction<F>(maybeFunction: F | unknown): maybeFunction is F {
 
 function asMapDispatchToPropsFn<S, T extends string, P, I>(
     actionCreators?: ActionCreatorMapping<T, P, S>,
-): MapDispatchToProps<T, P, I> | undefined {
+): Nullable<MapDispatchToProps<T, P, I>> {
     return (
         actionCreators &&
         function mapDispatchToProps(

tests/hooks.test.ts

@@ -0,0 +1,44 @@
+import { renderHook } from "@testing-library/react-hooks";
+import { useDispatch } from "src";
+import { createContextWithValue } from "src/createContext";
+
+describe("useDispatch", () => {
+    it("uses dispatch from Context", () => {
+        const dispatch = jest.fn();
+        const context = createContextWithValue<unknown, string, string>({
+            dispatch,
+        });
+        const ACTION_TYPE = "ACTION_TYPE" as const;
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        const actionCreator = (payload?: string) => ({
+            type: ACTION_TYPE,
+            payload,
+        });
+        const { result } = renderHook(() =>
+            useDispatch(actionCreator, context),
+        );
+        const arg0 = "Some argument";
+        result.current(arg0);
+        expect(dispatch).toHaveBeenCalledTimes(1);
+        expect(dispatch).toHaveBeenCalledWith({
+            type: ACTION_TYPE,
+            payload: arg0,
+        });
+    });
+
+    it.each`
+        actionCreator
+        ${"non function"}
+        ${null}
+        ${undefined}
+    `("fails to use dispatch with actionCreator", ({ actionCreator }) => {
+        const dispatch = jest.fn();
+        const context = createContextWithValue<unknown, string, string>({
+            dispatch,
+        });
+        const { result } = renderHook(() =>
+            useDispatch(actionCreator, context),
+        );
+        expect(() => result.current).toThrow("Unable to bind action creator");
+    });
+});

tests/index.test.tsx

@@ -110,6 +110,7 @@ describe("e2e", (): void => {
         });
         const mapDispatchToProps = {
             increment: rootDuck.actions.counter.increment,
+            init: null,
         };
         const staticMergeProps = <A, B, C, D>(
             stateProps: A,
@@ -211,7 +212,12 @@ describe("e2e", (): void => {
                 const MockComponent = jest.fn(DumbComponent);
                 const ConnectedComponent = connectGlobal(
                     mapStateToProps,
-                    mapDispatchToProps,
+                    (dispatch) => ({
+                        increment: bindActionCreators(
+                            rootDuck.actions.counter.increment,
+                            dispatch,
+                        ),
+                    }),
                     staticMergeProps,
                     { pure },
                 )(MockComponent);

typings/duck.d.ts

@@ -15,7 +15,7 @@ type ActionCreatorMapping<
     P = unknown,
     S = unknown,
     C extends string = T /* Action creator mapping keys */
-> = Record<C, ActionCreator<T, P, S>>;
+> = Record<C, Nullable<ActionCreator<T, P, S>>>;
 
 type ActionDispatcher<T extends string, P = unknown> = (...args: P[]) => void;
 
@@ -90,5 +90,5 @@ type RootDuck<
     initialState: Record<N, S>;
     names: Set<N>;
     reducer: Reducer<Record<N, S>, T, P>;
-    selectors: Record<N, SelectorMapping<S, R, T, P, Q> | undefined>;
+    selectors: Record<N, Nullable<SelectorMapping<S, R, T, P, Q>>>;
 };

typings/utils.d.ts

@@ -0,0 +1 @@
+type Nullable<T> = T | null | undefined;