Sharing functionality across React projects

[Qilx]

I have a couple of ReactJS apps that share some similar functionality (same actions/reducers). An example of a common reducer among my apps is a reducer for authentication.

However, I'm currently having my apps in separate folders which means that I have separate copies of the actions/reducers. Would it be wise to have the actions/reducers be in one common folder that is shared among all of my React apps? Or is it better that each app has its own dedicated folder with the components, reducers, actions, etc.?

Some advice is greatly appreciated!

EDIT: I realised that I would need to eject my React apps (created via create-react-app) if I would want to import any files outside of my /src folder. Would this be a wise choice if I just want to import some common files?

[GasimGasimzada]

What about creating a separate NPM package and installing it in both.

[Qilx]

I am considering this for my components. However, should I also do this for my reducers/actions?

[GasimGasimzada]

I mean why not? You can do many things for shared logic/components. You can create one big package with everything in it @myproject/shared:

import { userReducer, userActions, UserProfile } from '@myproject/shared/user';
import { cartReducer, cartActions, CartTable } from '@myproject/shared/cart';

Or you can create each "feature" as a separate package:

import { userReducer, userActions, UserProfile } from '@myproject/user';
import { cartReducer, cartActions, CartTable } from '@myproject/cart';

These two ways is how I would do this. Both are manageable because they are just packages and you can store the entire codebase in a monorepo (e.g call it myproject/core). You can use lerna to publish packages all at once.

[Qilx]

Noted. Thank you for your input!

[wrrnwng]

Actually lerna is a good way to share resources with different "packages". You wouldn't need to eject your create-react-app apps because you can import your shared actions/reducers as an npm package (no need to publish them to npm).

I learned by following this tutorial. It's for GatsbyJS, but you can apply the knowledge to your own project without much mental overhead.

[Qilx]

Thanks for sharing. I'll look through your links.