Improve types for promiseFn/deferFn props.

async-library · Aug 8, 2019 · 68759e8 · 68759e8
1 parent 5e8e426
commit 68759e8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/examples/with-typescript/src/App.tsx b/examples/with-typescript/src/App.tsx
@@ -1,13 +1,25 @@
 import React, { Component } from "react"
-import Async, { createInstance, useAsync, IfPending, IfRejected, IfFulfilled } from "react-async"
+import Async, {
+  createInstance,
+  useAsync,
+  IfPending,
+  IfRejected,
+  IfFulfilled,
+  PromiseFn,
+} from "react-async"
 import DevTools from "react-async-devtools"
 import "./App.css"
 
-const promiseFn = () => Promise.resolve("baz")
-const CustomAsync = createInstance({ promiseFn })
+const loadFirstName: PromiseFn<string> = ({ userId }) =>
+  fetch(`https://reqres.in/api/users/${userId}`)
+    .then(res => (res.ok ? Promise.resolve(res) : Promise.reject(res)))
+    .then(res => res.json())
+    .then(({ data }) => data.first_name)
+
+const CustomAsync = createInstance({ promiseFn: loadFirstName })
 
 const UseAsync = () => {
-  const state = useAsync({ promiseFn })
+  const state = useAsync({ promiseFn: loadFirstName, userId: 1 })
   return (
     <>
       <IfPending state={state}>Loading...</IfPending>
@@ -34,7 +46,7 @@ class App extends Component {
           <Async promiseFn={() => Promise.resolve("bar")}>
             <Async.Resolved>{data => <>{data}</>}</Async.Resolved>
           </Async>
-          <CustomAsync>
+          <CustomAsync userId={1}>
             <CustomAsync.Resolved>{data => <>{data}</>}</CustomAsync.Resolved>
           </CustomAsync>
           <UseAsync />

diff --git a/packages/react-async/src/index.d.ts b/packages/react-async/src/index.d.ts
@@ -13,8 +13,12 @@ export type SettledChildren<T> =
   | ((state: AsyncFulfilled<T> | AsyncRejected<T>) => React.ReactNode)
   | React.ReactNode
 
-export type PromiseFn<T> = (props: object, controller: AbortController) => Promise<T>
-export type DeferFn<T> = (args: any[], props: object, controller: AbortController) => Promise<T>
+export type PromiseFn<T> = (props: AsyncProps<T>, controller: AbortController) => Promise<T>
+export type DeferFn<T> = (
+  args: any[],
+  props: AsyncProps<T>,
+  controller: AbortController
+) => Promise<T>
 
 interface AbstractAction {
   type: string
@@ -31,7 +35,7 @@ export interface AsyncOptions<T> {
   promiseFn?: PromiseFn<T>
   deferFn?: DeferFn<T>
   watch?: any
-  watchFn?: (props: object, prevProps: object) => any
+  watchFn?: (props: AsyncProps<T>, prevProps: AsyncProps<T>) => any
   initialValue?: T
   onResolve?: (data: T) => void
   onReject?: (error: Error) => void
@@ -43,7 +47,7 @@ export interface AsyncOptions<T> {
   dispatcher?: (
     action: AsyncAction<T>,
     internalDispatch: (action: AsyncAction<T>) => void,
-    props: object
+    props: AsyncProps<T>
   ) => void
   debugLabel?: string
   [prop: string]: any