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 sufficient when composing multiple "data-aware" widgets together. There are occasions that multiple widgets want to be able to share the current resource options. For example, 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, which renders the 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>
    );
});