Recipe for developing component libraries for reuse in apps using react-redux?

[binarykitchen]

Hello folks,

While testing my new components, I've got this infamous error:

could not find react-redux context value; please ensure the component is wrapped in a <Provider>

Understand. Easy to solve if it were an app. But it's a new npm package exporting new UI components using useSelector and @reduxjs/toolkit inside. Do I really have to wrap each of them with a provider?

Wondering if you have any examples how to build component (not app) libraries using react-redux?

[markerikson]

No, it's expected that the <Provider> would be whatever's getting used in the application. That's the point of React-Redux using context. It's a form of dependency injection.

[binarykitchen]

Right. But in my case it's a component library. How would you wrap exported components with the provider and root store?

Perhaps with a wrapper function something like

const wrapWithReduxProvider = (component) => {
  return (
    <Provider store={rootStore}>
      {component}
    </Provider>
  );
};

Then in the root React component:

const Recorder = (props: RecorderProps) => {
  ...
}

export { wrapWithReduxProvider(Recorder) as Recorder };

Has something like this been done before or does RTK toolkit come with helper functions already doing something similar?

[markerikson]

Definitely nothing in RTK for that.

I think I'm confused on the intended use case for your components + Redux. Are you expecting that they will read from the user app's global Redux store, and the end user is responsible for adding a given reducer you provide into their app's store? Or are you creating your own Redux store in the component library that you expect these components will read from, separate from a potential app-level store?

[binarykitchen]

I expected that question :)

Or are you creating your own Redux store in the component library that you expect these components will read from, separate from a potential app-level store?

This.

It's a complex component where I want to manage state cleanly in isolation using RTK without any apps messing with these.
That's why I'm after something like a wrapWithReduxProvider fn.

[markerikson]

Ah. Then yeah, you are going to be responsible for ensuring it's wrapped with a Provider with your own store. Same as if you were using Context for this plus a useReducer in a parent.

[binarykitchen]

Exactly. And this library will export a couple of root components. Don't want to write too much code just for wrapping.

For now, I've drafted a helper function like that:

const wrapWithRedux = <P extends object>(Component: ComponentType<P>) => {
  const WrappedComponent: React.FC<P> = (props: P) => (
    <Provider store={rootStore}>
      <Component {...props} />
    </Provider>
  );

  // For easier debugging
  WrappedComponent.displayName = `Wrapped${Component.displayName}`;

  return WrappedComponent;
};

And calling it with:

const ReduxRecorder = wrapWithRedux<RecorderProps>(Recorder);

... before exporting or testing it in Storybook.

I wonder if this has been discussed, tested or raised before? And whether this code is safe or messing up with the overall state management?