javascript - Developing a Redux store as a seperate NPM module for a React App - Stack Overflow

admin管理员组

文章数量:1402832

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 bees a hell of a job. IMO, use redux only when it is really needed. Otherwise, React ponent states are good enough to manage the states of a ponent.

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 bees a hell of a job. IMO, use redux only when it is really needed. Otherwise, React ponent states are good enough to manage the states of a ponent.

• javascript
• reactjs
• npm
• redux
• modularity

Share Improve this question Follow edited Jul 25, 2018 at 13:49 besrabasant asked Jan 25, 2018 at 14:55 besrabasantbesrabasant 2,87077 gold badges3131 silver badges4242 bronze badges 5

• 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 remend to anyone. Btw this might be of use in testing redux store: github./iamdanthedev/describe-redux – Daniel Khoroshko Commented Jan 25, 2018 at 15:36
• and they were sitting on a private npm registry which I had to run in docker... to much trouble – Daniel Khoroshko Commented Jan 25, 2018 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 Commented Jan 25, 2018 at 15:50
• 1 I have my mon ponents 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 remend to have everything in a single package and when the times es split the mon code if needed. – Crysfel Commented Jan 25, 2018 at 15:55
• Thanks, all of you for all your suggestions. I now understand what you all are trying to say. – besrabasant Commented Jan 25, 2018 at 15:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

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!

本文标签： javascriptDeveloping a Redux store as a seperate NPM module for a React AppStack Overflow