Use shared reducer for core state logic.

Author: ghengeveld

src/Async.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { actions, init, reducer } from "./reducer"
 
 let PropTypes
 try {
@@ -30,21 +31,13 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
       const promise = props.promise
       const promiseFn = props.promiseFn || defaultProps.promiseFn
       const initialValue = props.initialValue || defaultProps.initialValue
-      const initialError = initialValue instanceof Error ? initialValue : undefined
-      const initialData = initialError ? undefined : initialValue
 
       this.mounted = false
       this.counter = 0
       this.args = []
       this.abortController = { abort: () => {} }
       this.state = {
-        initialValue,
-        data: initialData,
-        error: initialError,
-        isLoading: !!promise || (promiseFn && !initialValue),
-        startedAt: promise ? new Date() : undefined,
-        finishedAt: initialValue ? new Date() : undefined,
-        counter: this.counter,
+        ...init({ initialValue, promise, promiseFn }),
         cancel: this.cancel,
         run: this.run,
         reload: () => {
@@ -54,6 +47,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
         setData: this.setData,
         setError: this.setError,
       }
+      this.dispatch = (action, callback) => this.setState(state => reducer(state, action), callback)
     }
 
     componentDidMount() {
@@ -89,12 +83,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
         this.abortController = new window.AbortController()
       }
       this.counter++
-      this.setState({
-        isLoading: true,
-        startedAt: new Date(),
-        finishedAt: undefined,
-        counter: this.counter,
-      })
+      this.dispatch({ type: actions.start, meta: { counter: this.counter } })
     }
 
     load() {
@@ -129,12 +118,12 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
     cancel() {
       this.counter++
       this.abortController.abort()
-      this.setState({ isLoading: false, startedAt: undefined, counter: this.counter })
+      this.dispatch({ type: actions.cancel, meta: { counter: this.counter } })
     }
 
     onResolve(counter) {
       return data => {
-        if (this.mounted && this.counter === counter) {
+        if (this.counter === counter) {
           const onResolve = this.props.onResolve || defaultProps.onResolve
           this.setData(data, () => onResolve && onResolve(data))
         }
@@ -144,7 +133,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
 
     onReject(counter) {
       return error => {
-        if (this.mounted && this.counter === counter) {
+        if (this.counter === counter) {
           const onReject = this.props.onReject || defaultProps.onReject
           this.setError(error, () => onReject && onReject(error))
         }
@@ -153,12 +142,12 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
     }
 
     setData(data, callback) {
-      this.setState({ data, error: undefined, isLoading: false, finishedAt: new Date() }, callback)
+      this.mounted && this.dispatch({ type: actions.fulfill, payload: data }, callback)
       return data
     }
 
     setError(error, callback) {
-      this.setState({ error, isLoading: false, finishedAt: new Date() }, callback)
+      this.mounted && this.dispatch({ type: actions.reject, payload: error, error: true }, callback)
       return error
     }
 

src/reducer.js

@@ -0,0 +1,51 @@
+export const actions = {
+  start: "start",
+  cancel: "cancel",
+  fulfill: "fulfill",
+  reject: "reject",
+}
+
+export const init = ({ initialValue, promise, promiseFn }) => ({
+  initialValue,
+  data: initialValue instanceof Error ? undefined : initialValue,
+  error: initialValue instanceof Error ? initialValue : undefined,
+  isLoading: !!promise || (promiseFn && !initialValue),
+  startedAt: promise || promiseFn ? new Date() : undefined,
+  finishedAt: initialValue ? new Date() : undefined,
+  counter: 0,
+})
+
+export const reducer = (state, { type, payload, meta }) => {
+  switch (type) {
+    case actions.start:
+      return {
+        ...state,
+        isLoading: true,
+        startedAt: new Date(),
+        finishedAt: undefined,
+        counter: meta.counter,
+      }
+    case actions.cancel:
+      return {
+        ...state,
+        isLoading: false,
+        startedAt: undefined,
+        counter: meta.counter,
+      }
+    case actions.fulfill:
+      return {
+        ...state,
+        data: payload,
+        error: undefined,
+        isLoading: false,
+        finishedAt: new Date(),
+      }
+    case actions.reject:
+      return {
+        ...state,
+        error: payload,
+        isLoading: false,
+        finishedAt: new Date(),
+      }
+  }
+}

src/useAsync.js

@@ -1,52 +1,48 @@
-import { useCallback, useDebugValue, useEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useDebugValue, useEffect, useMemo, useRef, useReducer } from "react"
+import { actions, init, reducer } from "./reducer"
+
+const noop = () => {}
 
 const useAsync = (arg1, arg2) => {
   const counter = useRef(0)
   const isMounted = useRef(true)
   const lastArgs = useRef(undefined)
   const prevOptions = useRef(undefined)
-  const abortController = useRef({ abort: () => {} })
+  const abortController = useRef({ abort: noop })
 
   const options = typeof arg1 === "function" ? { ...arg2, promiseFn: arg1 } : arg1
   const { promise, promiseFn, deferFn, initialValue, onResolve, onReject, watch, watchFn } = options
 
-  const [state, setState] = useState({
-    data: initialValue instanceof Error ? undefined : initialValue,
-    error: initialValue instanceof Error ? initialValue : undefined,
-    startedAt: promise || promiseFn ? new Date() : undefined,
-    finishedAt: initialValue ? new Date() : undefined,
-  })
+  const [state, dispatch] = useReducer(reducer, options, init)
 
-  const handleData = (data, callback = () => {}) => {
+  const setData = (data, callback = noop) => {
     if (isMounted.current) {
-      setState(state => ({ ...state, data, error: undefined, finishedAt: new Date() }))
-      callback(data)
+      dispatch({ type: actions.fulfill, payload: data })
+      callback()
     }
     return data
   }
 
-  const handleError = (error, callback = () => {}) => {
+  const setError = (error, callback = noop) => {
     if (isMounted.current) {
-      setState(state => ({ ...state, error, finishedAt: new Date() }))
-      callback(error)
+      dispatch({ type: actions.reject, payload: error, error: true })
+      callback()
     }
     return error
   }
 
-  const handleResolve = count => data => count === counter.current && handleData(data, onResolve)
-  const handleReject = count => error => count === counter.current && handleError(error, onReject)
+  const handleResolve = count => data =>
+    count === counter.current && setData(data, () => onResolve && onResolve(data))
+  const handleReject = count => error =>
+    count === counter.current && setError(error, () => onReject && onReject(error))
 
   const start = () => {
     if ("AbortController" in window) {
       abortController.current.abort()
       abortController.current = new window.AbortController()
     }
     counter.current++
-    setState(state => ({
-      ...state,
-      startedAt: new Date(),
-      finishedAt: undefined,
-    }))
+    dispatch({ type: actions.start, meta: { counter: counter.current } })
   }
 
   const load = () => {
@@ -79,7 +75,7 @@ const useAsync = (arg1, arg2) => {
   const cancel = () => {
     counter.current++
     abortController.current.abort()
-    setState(state => ({ ...state, startedAt: undefined }))
+    dispatch({ type: actions.cancel, meta: { counter: counter.current } })
   }
 
   useEffect(() => {
@@ -104,14 +100,11 @@ const useAsync = (arg1, arg2) => {
   return useMemo(
     () => ({
       ...state,
-      initialValue,
-      isLoading: state.startedAt && (!state.finishedAt || state.finishedAt < state.startedAt),
-      counter: counter.current,
       run,
       reload: () => (lastArgs.current ? run(...lastArgs.current) : load()),
       cancel,
-      setData: handleData,
-      setError: handleError,
+      setData,
+      setError,
     }),
     [state]
   )
@@ -152,5 +145,5 @@ const unsupported = () => {
   )
 }
 
-export default (useState ? useAsync : unsupported)
-export const useFetch = useState ? useAsyncFetch : unsupported
+export default (useEffect ? useAsync : unsupported)
+export const useFetch = useEffect ? useAsyncFetch : unsupported