| 1 | import * as React from 'react';
|
|---|
| 2 | import { useRef } from 'react';
|
|---|
| 3 | import { Provider } from 'react-redux';
|
|---|
| 4 | import { createRechartsStore } from './store';
|
|---|
| 5 | import { useIsPanorama } from '../context/PanoramaContext';
|
|---|
| 6 | import { RechartsReduxContext } from './RechartsReduxContext';
|
|---|
| 7 | export function RechartsStoreProvider(_ref) {
|
|---|
| 8 | var {
|
|---|
| 9 | preloadedState,
|
|---|
| 10 | children,
|
|---|
| 11 | reduxStoreName
|
|---|
| 12 | } = _ref;
|
|---|
| 13 | var isPanorama = useIsPanorama();
|
|---|
| 14 | /*
|
|---|
| 15 | * Why the ref? Redux official documentation recommends to use store as a singleton,
|
|---|
| 16 | * and reuse that everywhere: https://redux-toolkit.js.org/api/configureStore#basic-example
|
|---|
| 17 | *
|
|---|
| 18 | * Which is correct! Except that is considering deploying Redux in an app.
|
|---|
| 19 | * Recharts as a library supports multiple charts on the same page.
|
|---|
| 20 | * And each of these charts needs its own store independent of others!
|
|---|
| 21 | *
|
|---|
| 22 | * The alternative is to have everything in the store keyed by the chart id.
|
|---|
| 23 | * Which would make working with everything a little bit more painful because we need the chart id everywhere.
|
|---|
| 24 | */
|
|---|
| 25 | var storeRef = useRef(null);
|
|---|
| 26 |
|
|---|
| 27 | /*
|
|---|
| 28 | * Panorama means that this chart is not its own chart, it's only a "preview"
|
|---|
| 29 | * being rendered as a child of Brush.
|
|---|
| 30 | * In such case, it should not have a store on its own - it should implicitly inherit
|
|---|
| 31 | * whatever data is in the "parent" or "root" chart.
|
|---|
| 32 | * Which here is represented by not having a Provider at all. All selectors will use the root store by default.
|
|---|
| 33 | */
|
|---|
| 34 | if (isPanorama) {
|
|---|
| 35 | return children;
|
|---|
| 36 | }
|
|---|
| 37 | if (storeRef.current == null) {
|
|---|
| 38 | storeRef.current = createRechartsStore(preloadedState, reduxStoreName);
|
|---|
| 39 | }
|
|---|
| 40 |
|
|---|
| 41 | // @ts-expect-error React-Redux types demand that the context internal value is not null, but we have that as default.
|
|---|
| 42 | var nonNullContext = RechartsReduxContext;
|
|---|
| 43 | return /*#__PURE__*/React.createElement(Provider, {
|
|---|
| 44 | context: nonNullContext,
|
|---|
| 45 | store: storeRef.current
|
|---|
| 46 | }, children);
|
|---|
| 47 | } |
|---|