Composing behavior with resources

Resources can be used in multiple widgets and the cached data will be shared, however sharing the data is sometimes not enough when composing multiple “data-aware” widgets together. There are occasions that multiple widgets want to be able to share the current resource options, such that one widget can set a filter and another widget can react and render the filtered data set. This is where creating a resource with shared options come in, a resource with shared options can be created by the resources middleware and passed into multiple widgets that will both share resource options, so that a pagination widget can set the page and another widget is used to render the page of items will react to the page change and fetch the new results.

MyComposedWidget.tsx

import { create, tsx } from '@dojo/framework/core/vdom';
import { createResourceMiddleware } from '@dojo/framework/core/middleware/resources';
interface ResourceData {
    value: string;
    label: string;
}
const resources = createResourceMiddleware<ResourceData>();
const factory = create({ resources });
export default factory(function MyComposedWidget({ resources }) {
    const { getResource } = resources();
    const sharedResource = getResource({ sharedOptions: true });
    return (
        <div>
            <Results resource={sharedResource} />
            <Pagination resource={sharedResource} />
        </div>
    );
});