Have ideas to improve npm?Join in the discussion! »

    use-async-reducer
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.0 • Public • Published

    use-async-reducer

    An unoppininated hook to help manage async actions in React

    npm codecov Build Status NPM

    This package provides only a reducer to manage state, see use-async-call for an abstraction which manages hook lifecycle and boilerplate reduction

    Install

    npm install use-async-reducer
    

    Useage

    Basic Example

    import {useEffect} from 'react'
    import useAsyncReducer from 'use-async-reducer'
     
    function DataLoadingComponent({id}) {
      const [response, actions] = useAsyncReducer()
     
      useEffect(() => {
        const fetchData = async () => {
          actions.initialize()
          try {
            actions.success(await Api.fetchUser(id))
          } catch (error) {
            action.failure(error)
          }
        }
      }, [id])
     
      return (
        <>
          {response.loading && <div>Loading...</div>}
          {response.data && <div>{response.data.user.name}</div>}
          {response.error && <div>{response.error.message}</div>}
        </>
      )
    }

    Example with updating data

    import {useEffect, useCallback} from 'react'
    import useAsyncReducer, {Loadable} from 'use-async-reducer'
     
    const LoadingIndicator: React.FC<Loadable<any>> = ({loading, data, error}) => {
      if (error) {
        return `Error: ${error.message}`
      }
     
      if (loading && data === null) {
        return 'Loading initial data...'
      }
     
      if (loading) {
        return 'Updating data...'
      }
     
      return null
    }
     
    function DataLoadingComponent({id}) {
      const [response, actions] = useAsyncReducer()
     
      useEffect(() => {
        const fetchData = async () => {
          actions.initialize()
          try {
            actions.success(await Api.fetchUser(id))
          } catch (error) {
            action.failure(error)
          }
        }
      }, [id])
     
      const updateData = useCallback(async () => {
        actions.request()
        try {
          actions.success(await Api.fetchUser(id))
        } catch (error) {
          action.failure(error)
        }
      }, [])
     
      return (
        <>
          <LoadingIndicator {...response} />
          {response.data && (
            <>
              <pre>{JSON.stringify(data, null, 2)}</pre>
              <button onClick={updateData}>Refresh Data</button>
            </>
          )}
        </>
      )
    }

    Install

    npm i use-async-reducer

    DownloadsWeekly Downloads

    17

    Version

    1.4.0

    License

    MIT

    Unpacked Size

    28 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar