introduce ReducerAsyncState type, type promise as optional undefined

Author: phryneas

packages/react-async/src/Async.tsx

@@ -13,8 +13,8 @@ import {
   FulfilledChildren,
   SettledChildren,
   RejectedChildren,
-  AbstractState,
   AsyncAction,
+  ReducerAsyncState,
 } from "./types"
 
 interface InitialProps<T> {
@@ -112,7 +112,10 @@ export const createInstance = <T extends {}>(
       const { devToolsDispatcher } = globalScope.__REACT_ASYNC__
       const _reducer = props.reducer || defaultProps.reducer
       const _dispatcher = props.dispatcher || defaultProps.dispatcher || devToolsDispatcher
-      const reducer: (state: AsyncState<T>, action: AsyncAction<T>) => AsyncState<T> = _reducer
+      const reducer: (
+        state: ReducerAsyncState<T>,
+        action: AsyncAction<T>
+      ) => ReducerAsyncState<T> = _reducer
         ? (state, action) => _reducer(state, action, asyncReducer)
         : asyncReducer
       const dispatch = dispatchMiddleware<T>((action, callback) => {

packages/react-async/src/helpers.tsx

@@ -9,14 +9,23 @@ import {
   SettledChildren,
   AsyncState,
   AbstractState,
+  AsyncInitial,
+  AsyncFulfilled,
+  AsyncPending,
+  AsyncRejected,
 } from "./types"
 
 /**
  * Due to https://github.com/microsoft/web-build-tools/issues/1050, we need
  * AbstractState imported in this file, even though it is only used implicitly.
  * This _uses_ AbstractState so it is not accidentally removed by someone.
  */
-declare type ImportWorkaround<T> = AbstractState<T>
+declare type ImportWorkaround<T> =
+  | AbstractState<T>
+  | AsyncInitial<T>
+  | AsyncFulfilled<T>
+  | AsyncPending<T>
+  | AsyncRejected<T>
 
 type ChildrenFn = (...args: any[]) => React.ReactNode
 const renderFn = (children: React.ReactNode | ChildrenFn, ...args: any[]) => {

packages/react-async/src/reducer.ts

@@ -8,6 +8,8 @@ import {
   AsyncRejected,
   AsyncInitial,
   AbstractState,
+  ReducerAsyncState,
+  ReducerBaseState,
 } from "./types"
 
 /**
@@ -32,20 +34,20 @@ export const init = <T>({
   initialValue?: Error | T
   promise?: Promise<T>
   promiseFn?: PromiseFn<T>
-}): AsyncState<T> => ({
-  initialValue,
-  data: initialValue instanceof Error ? undefined : initialValue,
-  error: initialValue instanceof Error ? initialValue : undefined,
-  value: initialValue,
-  startedAt: promise || promiseFn ? new Date() : undefined,
-  finishedAt: initialValue ? new Date() : undefined,
-  ...getStatusProps(getInitialStatus(initialValue, promise || promiseFn)),
-  counter: 0,
-  // @ts-ignore see #92
-  promise: undefined,
-})
+}) =>
+  ({
+    initialValue,
+    data: initialValue instanceof Error ? undefined : initialValue,
+    error: initialValue instanceof Error ? initialValue : undefined,
+    value: initialValue,
+    startedAt: promise || promiseFn ? new Date() : undefined,
+    finishedAt: initialValue ? new Date() : undefined,
+    ...getStatusProps(getInitialStatus(initialValue, promise || promiseFn)),
+    counter: 0,
+    promise: undefined,
+  } as ReducerAsyncState<T>)
 
-export const reducer = <T>(state: AsyncState<T>, action: AsyncAction<T>) => {
+export const reducer = <T>(state: ReducerAsyncState<T>, action: AsyncAction<T>) => {
   switch (action.type) {
     case actionTypes.start:
       return {
@@ -55,7 +57,7 @@ export const reducer = <T>(state: AsyncState<T>, action: AsyncAction<T>) => {
         ...getStatusProps(statusTypes.pending),
         counter: action.meta.counter,
         promise: action.meta.promise,
-      } as AsyncPending<T>
+      } as AsyncPending<T, ReducerBaseState<T>>
     case actionTypes.cancel:
       return {
         ...state,
@@ -64,7 +66,10 @@ export const reducer = <T>(state: AsyncState<T>, action: AsyncAction<T>) => {
         ...getStatusProps(getIdleStatus(state.error || state.data)),
         counter: action.meta.counter,
         promise: action.meta.promise,
-      } as AsyncInitial<T> | AsyncFulfilled<T> | AsyncRejected<T>
+      } as
+        | AsyncInitial<T, ReducerBaseState<T>>
+        | AsyncFulfilled<T, ReducerBaseState<T>>
+        | AsyncRejected<T, ReducerBaseState<T>>
     case actionTypes.fulfill:
       return {
         ...state,
@@ -74,7 +79,7 @@ export const reducer = <T>(state: AsyncState<T>, action: AsyncAction<T>) => {
         finishedAt: new Date(),
         ...getStatusProps(statusTypes.fulfilled),
         promise: action.meta.promise,
-      } as AsyncFulfilled<T>
+      } as AsyncFulfilled<T, ReducerBaseState<T>>
     case actionTypes.reject:
       return {
         ...state,
@@ -83,7 +88,7 @@ export const reducer = <T>(state: AsyncState<T>, action: AsyncAction<T>) => {
         finishedAt: new Date(),
         ...getStatusProps(statusTypes.rejected),
         promise: action.meta.promise,
-      } as AsyncRejected<T>
+      } as AsyncRejected<T, ReducerBaseState<T>>
     default:
       return state
   }

packages/react-async/src/types.ts

@@ -40,9 +40,9 @@ export interface AsyncOptions<T> {
   onResolve?: (data: T) => void
   onReject?: (error: Error) => void
   reducer?: (
-    state: AsyncState<T>,
+    state: ReducerAsyncState<T>,
     action: AsyncAction<T>,
-    internalReducer: (state: AsyncState<T>, action: AsyncAction<T>) => AsyncState<T>
+    internalReducer: (state: ReducerAsyncState<T>, action: AsyncAction<T>) => ReducerAsyncState<T>
   ) => AsyncState<T>
   dispatcher?: (
     action: AsyncAction<T>,
@@ -60,7 +60,7 @@ export interface AsyncProps<T> extends AsyncOptions<T> {
 export interface AbstractState<T> {
   initialValue?: T | Error
   counter: number
-  promise: Promise<T>
+  promise: Promise<T> | undefined
   run: (...args: any[]) => void
   reload: () => void
   cancel: () => void
@@ -129,8 +129,17 @@ export type AsyncRejected<T, S = AbstractState<T>> = S & {
   isRejected: true
   isSettled: true
 }
-export type AsyncState<T, S extends AbstractState<T> = AbstractState<T>> =
+
+type BaseAsyncState<T, S> =
   | AsyncInitial<T, S>
   | AsyncPending<T, S>
   | AsyncFulfilled<T, S>
   | AsyncRejected<T, S>
+
+export type ReducerBaseState<T> = Omit<
+  AbstractState<T>,
+  "run" | "reload" | "cancel" | "setData" | "setError"
+>
+export type ReducerAsyncState<T> = BaseAsyncState<T, ReducerBaseState<T>>
+
+export type AsyncState<T, S extends AbstractState<T> = AbstractState<T>> = BaseAsyncState<T, S>

packages/react-async/src/useAsync.tsx

@@ -3,7 +3,29 @@ import { useCallback, useDebugValue, useEffect, useMemo, useRef, useReducer } fr
 import globalScope from "./globalScope"
 import { actionTypes, init, dispatchMiddleware, reducer as asyncReducer } from "./reducer"
 
-import { AsyncOptions, AsyncState, AbstractState, PromiseFn, Meta } from "./types"
+import {
+  AsyncOptions,
+  AsyncState,
+  AbstractState,
+  PromiseFn,
+  Meta,
+  AsyncInitial,
+  AsyncFulfilled,
+  AsyncPending,
+  AsyncRejected,
+} from "./types"
+
+/**
+ * Due to https://github.com/microsoft/web-build-tools/issues/1050, we need
+ * AbstractState imported in this file, even though it is only used implicitly.
+ * This _uses_ AbstractState so it is not accidentally removed by someone.
+ */
+declare type ImportWorkaround<T> =
+  | AbstractState<T>
+  | AsyncInitial<T>
+  | AsyncFulfilled<T>
+  | AsyncPending<T>
+  | AsyncRejected<T>
 
 export interface FetchOptions<T> extends AsyncOptions<T> {
   defer?: boolean