Diffuse 3

What's new?

useFetchState & DiffuseBoundary

The useFetchState hook and DiffuseBoundary component are used together to handle loading and errors for asynchronous actions. The useFetchState hook fetches the state of a FuseBox while waiting for an asynchronous action to finish. The DiffuseBoundary component provides a fallback UI for loading and error states.

import { AFuseBox } from '../StateManagement/Stores'

function Text(props) {
    // Fetch text
    const fuseBox = props.fetchText()

    return (
        <span>
            {fuseBox.text}
        </span>
    )
}

function Main(props) {
    useEffect(() => {
        // Run get text asyncronous action
        AFuseBox.actions.getText()
    },[])
    return (
        <DiffuseBoundary 
            SuspenseFallback={<>LOADING.................</>} 
            ErrorFallbackComponent={({state}) => { console.log(state); return (<>{state.error}</>)}}
        >
            <Text fetchText={AFuseBox.useFetchState}/>
        </DiffuseBoundary>
    )
}

In the example above, while waiting on the asynchronous action to finish, the Text component will fall back to SuspenseFallback and when an error occurs on the asynchronous action, the component will fallback to ErrorFallbackComponent.

An fetch state being resolved or rejected is determined by "store.diffuse" in the default executor. The executor can be overwritten like so:

    AFuseBox.useFetchState((state, resolve, reject) => {
        if (store?.diffuse?.loading === false && store?.diffuse?.completed === true) {
            resolve()
        }
        else if (store?.diffuse?.loading === false && store?.diffuse?.error !== false) {
            reject()
        }
    })

NOTE: This an example of the default executor.

Deprecated

All hooks have been removed

• useFuse
• useSelectors
• useFuseSelection
• useDispatch
• useActions
  Instead use the FuseBox

In addition, createStore has been renamed to createFuseBox