Search code examples
javascriptreactjsnpmreduxmodularity

Developing a Redux store as a seperate NPM module for a React App

Is it viable to develop the Redux Store for a React App as a separate npm package and then import the Store in the React App

For example: I have a hypothetical React Project named reactapp.

I develop a package named reactapp-reduxstore containing the Redux Store and it's Actions and Reducers

Now, I import the reactapp-reduxstore into my reactapp project

// other imports

import { store } from 'reactapp-reduxstore'

const ReactApp = () => (
<Provider store={store}>
    // React App Components
<Provider/>
)

// Mount ReactApp to DOM

Now, If I want to use actions from my redux store package, I import the action into the Component.

import { addUser } from "reactapp-reduxstore/users"

// Use the action in my Component

I just want to know, how viable is such structure for a React Project so that in future I do not run into Code Management problems.

NB: All the general code is not included for sake of brevity.

Update: This is an update from my experience on the usage of redux as mentioned above. You should never do that. Managing redux becomes a hell of a job. IMO, use redux only when it is really needed. Otherwise, React component states are good enough to manage the states of a component.

Solution

  • Well, your app and its state are tightly coupled. When you update one, you need to update the other one in most cases. So you will have to update and publish 2 NPM packages instead of one each time you fix a bug or develop something new.

    So I guess I would do that only if I needed the exact same store, actions and reducers in several apps. Otherwise I don't see any benefits to move the state of the app in another package. It seems like a lot of painful extra works for no real benefits.