11

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.

besrabasant
  • 2,422
  • 6
  • 27
  • 41
  • 2
    Once I divided my isomorphic mobx spa app into 5 packages: client, server, store, database and schema. Good gosh that was a headache! Would not recommend to anyone. Btw this might be of use in testing redux store: https://github.com/iamdanthedev/describe-redux – Daniel Khoroshko Jan 25 '18 at 15:36
  • and they were sitting on a private npm registry which I had to run in docker... to much trouble – Daniel Khoroshko Jan 25 '18 at 15:37
  • @DanielKhoroshko I want to develop my redux store isolated so that I can run tests on it more easily. I do understand that if I have to change a _particular feature_ of my project, then I will be having more than one package to manage. But from testing POV, is it viable? – besrabasant Jan 25 '18 at 15:50
  • 1
    I have my common components in a different package... it was really such a bad idea, I spend a lot of time updating the package for every change that I do. I'd recommend to have everything in a single package and when the times comes split the common code if needed. – Crysfel Jan 25 '18 at 15:55
  • Thanks, all of you for all your suggestions. I now understand what you all are trying to say. – besrabasant Jan 25 '18 at 15:56

2 Answers2

4

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.

GG.
  • 21,083
  • 14
  • 84
  • 130
  • What if I want to develop my app in a more modular way. What if I want to test my redux store separately and want my React app code to be cleaner. – besrabasant Jan 25 '18 at 15:30
  • 2
    Then why not, but as I said there is no real benefit for a lot of extra work. You can make your code modular and clean without splitting the code in different NPM packages. Just use different folders and files in your project and import/export them. – GG. Jan 25 '18 at 15:34
  • 6
    If you were to make a react native app that closely matches your web app, that may be a case where you wanted to share some of your redux business logic and having a separate package could make sense. Managing your packages in a monorepo with lerna (https://github.com/lerna/lerna) can also reduce the overhead of multiple package management. I would never go this approach if I didn't already have a need to share the code though. It's not that hard to split out after the fact if the need does arise later. – TLadd Jan 25 '18 at 17:03
0

I see some benefits here in this structure of the code, I really see some good benefits here, if you have your same replica of application in react native, this is one of the better structure and there are some real benefits while bundling your projects as well, if your redux data is very specific to your application and if you want to secure you can bundle it as well. rather than exposing the API calls. happy coding!

GopiinSO
  • 11
  • 2