React hooks for integrating with the @psionic/flux library.
Methods
# static useCacheReader(fluxCache) → {Array.<CachedValue, IsStaleFlag, IsLoadingFlag>}
React Hook that creates state values to interact with @psionic/flux FluxCache objects for the lifetime of the
React component the hook is used in.
Parameters:
| Name | Type | Description |
|---|---|---|
fluxCache |
module:@psionic/flux.FluxCache
|
The |
Hook API for reading the FluxCache's data as React state
Array.<CachedValue, IsStaleFlag, IsLoadingFlag>
Example
// Create a FluxCache object
const profileCache = createFluxCache({
id: 'profileCache',
fetch: async () => {
// Mock a network request delay
await delay(500);
return { name: 'John' };
},
});
// In a React component, use the `useCacheReader` hook to respond to changes to this FluxCache
const [
profile,
profileIsStale,
profileIsLoading,
] = useCacheReader(profileCache);
// The `profile` from the `useCacheReader` will contain `undefined` since that is the current value in the profile state
console.log(profile); // undefined
// The `profileIsStale` value will be set to `true` since no data has been fetched yet
console.log(profileIsStale); // true
// The `profileIsLoading` value will be set to `false` since the data is not loading currently
console.log(profileIsLoading); // false
// Trigger a fetch operation from anywhere in your codebase
profileCache.get();
// The `profile` will still contain the old data (in this case, undefined)
console.log(profile); // undefined
// The `profileIsStale` value will still be set to `true` since the data has not been fetched yet
console.log(profileIsStale); // true
// The `profileIsLoading` flag should now be set to `true` while the data is being fetched
console.log(profileIsLoading); // true
// Wait for 500ms for the data to finish loading
await delay(delayTime);
// The `profile` will now contain the new data
console.log(profile); // { name: 'John' }
// The `profileIsStale` value will be set to `false` since the data was just fetched
console.log(profileIsStale); // false
// The `profileIsLoading` value will be set to `false` since the data has finished loading
console.log(profileIsLoading); // false# static useStateReader(fluxState) → {*}
React Hook that creates state values to interact with @psionic/flux FluxState objects
for the lifetime of the React component the hook is used in.
Parameters:
| Name | Type | Description |
|---|---|---|
fluxState |
module:@psionic/flux.FluxState
|
The FluxState object to read data from as it changes |
The data currently stored in the FluxState as a React state value
*
Example
// Create a FluxState object
const profileState = createFluxState({
id: 'profileState',
value: null,
});
// In a React component, use the `useStateReader` hook to respond to changes to this `FluxState`
const profile = useStateReader(profileState);
// The return value of the `useStateReader` will contain `null` since that is the current value in the profile state
console.log(profile); // null
// Update the profile state from anywhere in your codebase
profileState.set({ name: 'John });
// The return value of the `useStateReader` will contain the new value
console.log(profile); // { name: 'John' }Type Definitions
*
# CachedValue
The data currently in the cache, whether it is stale or not. If another piece of data is currently being loaded, the old cached data will be represented here still.
boolean
# IsLoadingFlag
Boolean state value tracking whether the data in the cache is currently being loaded or not.
boolean
# IsStaleFlag
Boolean state value tracking whether the data in the cache is currently stale or not.