Skip to main content

<ExternalCacheProvider />

Integrates external stores with Reactive Data Client. Should be placed as high as possible in application tree as any usage of the hooks is only possible for components below the provider in the React tree.

caution

Is a replacement for <CacheProvider /> - do NOT use both at once

Installation​

npm install --save @data-client/redux redux

Usage​

index.tsx
import { ExternalCacheProvider } from '@data-client/redux';
import ReactDOM from 'react-dom';

import { store, selector } from './store';

ReactDOM.render(
  <ExternalCacheProvider store={store} selector={selector}>
    <App />
  </ExternalCacheProvider>,
  document.body,
);

See redux example for a more complete example.

store​

interface Store<S> {
  subscribe(listener: () => void): () => void;
  dispatch: React.Dispatch<ActionTypes>;
  getState(): S;
}

Store simply needs to conform to this interface. A common implementation is a redux store, but theoretically any external store could be used.

Read more about integrating redux.

selector​

(state: S) => State<unknown>

This function is used to retrieve the Reactive Data Client specific part of the store's state tree.