✨ add useAsyncTaskReducer

Author: VitorLuizC

src/hooks/useImperativeAsyncTask.ts

@@ -1,8 +1,9 @@
-import { useCallback, useMemo, useReducer } from 'react';
+import { useCallback } from 'react';
 import type AsyncTask from './AsyncTask';
 import isAbortError from './isAbortError';
-import { ActionType, getInitialState, reducer } from '../store';
+import { ActionType } from '../store';
 import useAbortController from '../useAbortController';
+import useAsyncTaskReducer from '../useAsyncTaskReducer';
 
 export type ImperativeAsyncTask<Result> = Readonly<{
   error: Error | null;
@@ -14,11 +15,7 @@ export type ImperativeAsyncTask<Result> = Readonly<{
 function useImperativeAsyncTask<Result>(): ImperativeAsyncTask<Result> {
   const { signal } = useAbortController();
 
-  // Prettier doesn't yet support instatiantion expressions.
-  // eslint-disable-next-line prettier/prettier
-  const initialState = useMemo(getInitialState<Result>, []);
-
-  const [state, dispatch] = useReducer(reducer<Result>, initialState);
+  const [state, dispatch] = useAsyncTaskReducer<Result>();
 
   const executeTask = useCallback(async (task: AsyncTask<Result>) => {
     dispatch({ type: ActionType.STARTED });

src/useAsyncTaskReducer/index.ts

@@ -0,0 +1,2 @@
+export { default } from './useAsyncTaskReducer';
+export type { AsyncTaskReducer } from './useAsyncTaskReducer';

src/useAsyncTaskReducer/useAsyncTaskReducer.test.ts

@@ -0,0 +1,64 @@
+/** @jest-environment jsdom */
+
+import { act, renderHook } from '@testing-library/react';
+import { ActionType, reducer } from '../store';
+import useAsyncTaskReducer from './useAsyncTaskReducer';
+
+jest.mock('../store', () => {
+  const store = jest.requireActual('../store');
+
+  return {
+    ...store,
+    reducer: jest.fn(store.reducer),
+  };
+});
+
+describe('useAsyncTaskReducer | integration tests', () => {
+  beforeEach(() => {
+    (reducer as jest.Mock).mockClear();
+  });
+
+  it('returns the state and dispatch function', () => {
+    const { result } = renderHook(useAsyncTaskReducer);
+
+    expect(result.current[0]).toEqual({
+      error: null,
+      result: null,
+      pendingTasks: 0,
+    });
+
+    act(() => {
+      result.current[1]({
+        type: ActionType.STARTED,
+      });
+    });
+
+    expect(result.current[0]).toEqual({
+      error: null,
+      result: null,
+      pendingTasks: 1,
+    });
+  });
+
+  describe('when component unmounts', () => {
+    it("prevents memory leaks and doesn't dispatch actions", () => {
+      const { result, unmount } = renderHook(useAsyncTaskReducer);
+
+      expect(result.current[0]).toEqual({
+        error: null,
+        result: null,
+        pendingTasks: 0,
+      });
+
+      unmount();
+
+      act(() => {
+        result.current[1]({
+          type: ActionType.STARTED,
+        });
+      });
+
+      expect(reducer).not.toHaveBeenCalled();
+    });
+  });
+});

src/useAsyncTaskReducer/useAsyncTaskReducer.ts

@@ -0,0 +1,28 @@
+import { useCallback, useMemo, useReducer } from 'react';
+import { Action, getInitialState, reducer, State } from '../store';
+import useMounted from '../useMounted';
+
+export type AsyncTaskReducer<Result> = readonly [
+  state: State<Result>,
+  dispatch: (action: Action<Result>) => void,
+];
+
+function useAsyncTaskReducer<Result>(): AsyncTaskReducer<Result> {
+  const mounted = useMounted();
+
+  const [state, dispatch] = useReducer(
+    // eslint-disable-next-line prettier/prettier
+    reducer<Result>,
+    useMemo(getInitialState<Result>, []),
+  );
+
+  const dispatchOnlyIfMounted = useCallback((action: Action<Result>) => {
+    if (mounted()) {
+      dispatch(action);
+    }
+  }, []);
+
+  return [state, dispatchOnlyIfMounted];
+}
+
+export default useAsyncTaskReducer;