Documentation

Module

@psionic/flux

A data fetching and caching framework. Easily create pipelines for ensuring data is loaded and cached when needed, while ensuring that stale data is re-fetched.

View Source flux/src/index.js, line 1

Classes

FluxCache
FluxState

Methods

# static createFluxCache(config) → {FluxState|FluxCache}

Creates a new FluxCache with the given ID. If the ID is already taken by another flux object, that object will be returned instead of a new Flux object being created.

Parameters:
Name Type Attributes Default Description
config Object

The configuration object
id string

The ID to use for the FluxCache; should be unique among all other active Flux objects
fetch function

The function to call to asynchronously fetch the data to store in the cache, if non-stale data does not already exist in the cache
dependsOn Array.<(FluxCache|FluxState)> <optional>
 []

The array of Flux objects this cache depends on; if any of the Flux objects' values change or become marked as stale, then this cache will also become marked as stale
staleAfter Number <optional>

The amount of time to wait before declaring the data in the cache as stale; if this value is not passed, then the cache will not be marked stale in response to the age of the data in the cache
autofetchOnStale boolean <optional>
 false

If set to true, then when the cache is marked as stale, the cache will automatically fetch new data to replace the stale data

View Source flux/src/flux-cache/flux-cache.js, line 603

The created Flux object, or the old Flux object with the given ID

FluxState | FluxCache
Examples
// Create a new Flux Cache representing a profile
const profileCache = createFluxCache({
     id: 'profileCache',
     fetch: async () => {
         return { name: 'John' };
     }
});
// If you attempt to create another Flux object with the same ID, the existing Flux object with that ID will be returned instead of
// a new one being created:
const profileCache = createFluxCache({
     id: 'profileCache',
     fetch: async () => {
         return { name: 'John' };
     }
});

const newProfileCache = createFluxCache({
     id: 'profileCache',
     fetch: async () => {
         return { name: 'Roni' };
     }
});

await profileCache.get(); // { name: 'John' }
await newProfileCache.get(); // { name: 'John' } as well, because the `createFluxCache` call simply returned the existing object with ID `profileCache`
// Sometimes you may want to invalidate a cache based on 1+ dependencies becoming stale; you can use the `dependsOn` config value to specify this
const userIDState = createFluxState({
     id: 'userIDState',
     value: 'original',
});

const profileCache = createFluxCache({
     id: 'profileCache',
     fetch: async () => {
         const userID = await userIDState.get();
         return fetchProfileByUserID(userID);
     },
     dependsOn: [userIDState],
});

profileCache.getStale(); // `true`, Caches start off stale
await profileCache.get();
profileCache.getStale(); // `false`, Data has now been cached
userIDState.set('new');
profileCache.getStale(); // `true`, One of the cache's dependencies has become stale

# static createFluxState(config) → {FluxState|FluxCache}

Creates a new FluxState with the given ID. If the ID is already taken by another Flux object, that object will be returned instead of a new Flux object being created.

Parameters:
Name Type Description
config Object

The configuration object
id string

The ID to use for the FluxState; should be unique among all other active Flux objects
value *

The initial value to set as data; this will be recursively cloned so that any changes to this value (if it is an object) will not affect the FluxState instance's value

View Source flux/src/flux-state/flux-state.js, line 183

The created Flux object, or the old Flux object with the given ID

FluxState | FluxCache
Examples
// Create a new Flux State representing a user ID
const userIDState = createFluxState({
     id: 'userIDState',
     value: 'test-user',
});
// If you attempt to create another Flux object with the same ID, the existing Flux object with that ID will be returned instead of
// a new one being created:
const userIDState = createFluxState({
     id: 'userIDState',
     value: 'original',
});

const newUserIDState = createFluxState({
     id: 'userIDState',
     value: 'new',
});

await userIDState.get(); // 'original'
await newUserIDState.get(); // 'original' as well, because the `createFluxState` call simply returned the existing object with ID `userIDState`