Skip to main content

<ExternalDataProvider />

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.

warning

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

Installation​

Usage​

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

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

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

See redux example for a more complete example.

Props​

store​

interface Store<S> {
  subscribe(listener: () => void): () => void;
  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.

controller​

Controller instance to use.

devButton​

In development, a small button will appear that gives easy access to browser devtools if installed. This option configures where it shows up, or if null will disable it altogether.

'bottom-right' | 'bottom-left' | 'top-right'| 'top-left' | null = 'bottom-right'

Disable button
<DataProvider devButton={null}>
  <App/>
</DataProvider>
Place in top right corner
<DataProvider devButton="top-right">
  <App/>
</DataProvider>