LogoLogo
  • Eventrix
  • Introduction
    • Installation
    • Quick start
    • Getting started
    • Demo
    • About
  • Devtools - EventrixDebugger
  • Use cases
    • Handle errors
    • Simple form management
    • Communication between components
    • Next.js
    • Basic setup on project
    • Fetch list and display in component
  • CONTEXT
    • EventrixProvider
    • PersistStoreGate
    • EventrixScope
  • MIGRATION
    • Redux -> Eventrix
  • Receivers
    • EventsReceiver
    • RequestsHandler
    • fetchToStateReceiver
    • fetchStateReceiver
    • fetchHandler
  • HOC
    • withEventrix
    • withEventrixState
  • HOOKS
    • useEventrixState
    • useEmit
    • useEvent
    • useEventState
    • useFetchToState
    • useReceiver
    • useFetchState
  • CLASS DECORATORS
    • @useEventrix
    • @receiver
    • @fetchToState
    • @listener
  • COMPONENT DECORATORS
    • @eventrixComponent
    • @eventListener
    • @stateListener
    • @eventrixState
Powered by GitBook
On this page

Was this helpful?

  1. HOOKS

useFetchState

This hook handles the data fetching process. Returns information about the data retrieval process and saves the results in a state.

If You want use hooks, hocs or component decorator You must use EventrixProvider in Your application. Go to "EventrixProvider" page in "Context" section for more details.

This hook requires the use of fetchStateReceiver with the same state name

import React, { useEffect } from 'react';
import { useFetchState } from 'eventrix';

const UsersList = () => {
    const [
        {
            isLoading,
            data: users,
            isSuccess,
            isError,
            error,
            status
        },
        emitFetch,
    ] = useFetchState('users');
    
    useEffect(() => {
        emitFetch();
    }, [emitFetch])
    
    if (isLoading) {
        return <div>Loading</div>
    }
    
    if (isError) {
        return <div>
            <div>Fetch list failed</div>
            <div>Error: {error.message}</div>
        </div>
    }
    
    return (
        <div>
            {users.map(user => <div key={user.id}>{user.name}</div>)}
        </div>
    );
}
import React, { useEffect } from 'react';
import { useFetchState } from 'eventrix';
import { User, UserFetchParams} from './interfaces';

const UsersList = () => {
    const [
        {
            isLoading,
            data: users,
            isSuccess,
            isError,
            error,
            status
        },
        emitFetch,
    ] = useFetchState<User[], UserFetchParams>('users');
    
    useEffect(() => {
        emitFetch();
    }, [emitFetch])
    
    if (isLoading) {
        return <div>Loading</div>
    }
    
    if (isError) {
        return <div>
            <div>Fetch list failed</div>
            <div>Error: {error.message}</div>
        </div>
    }
    
    return (
        <div>
            {users.map(user => <div key={user.id}>{user.name}</div>)}
        </div>
    );
}
PrevioususeReceiverNext@useEventrix

Last updated 3 years ago

Was this helpful?