My goal here is to have an npm module that exports a set of useful components to various applications in my company.
The components will need to have fairly complex shared state. Much of this state the apps won't care about, but some of it they will. The apps will also need to be able to change the state of the components via dispatches or some mechanism.
Is there a recommended way to do this using Redux or hooks, or whatever? I could not find examples or tutorials for this specific design question.
Related
What is the basic difference between react and redux? is react and redux is same? why we should use redux? Finally why it's called react-redux?
I want to know this i just confused between this two.
You must be pretty new to web development. First of all, welcome !
React and redux are pretty different beasts, but have often been used together to make state management easier in React apps.
React is a front-end web framework, it allows you to create a wide range of web apps using JSX (React's way of fusing Javascript and HTML). This is a gross oversimplification, I encourage you to read the documentation.
Redux is a state management library. With it, you can define one or many stores, containing a state (basically an object that holds any data you need), actions (methods to alter or retrieve the current value of the store) and to subscribe the state's changes at a global level. Again, the Redux documentation should have most of the answers you're looking for.
React and redux are often used together, mainly through the use of the react-redux package, since Redux offers a global, reactive state, enabling you to share data between React components anywhere in your app without having to pass props.
Now tough, you could achieve similar functionnality without Redux entirely, using React's own Hook and Context APIs. Although the logic behind these is a bit more involved, it allows for far more flexibility.
With our team, we are going to start a medium project with Reactjs + Apollo + Graphql and we are looking architecture pattern to keep an order on this project.
I was reading and watching some videos about Architecture for Reactjs and the most commented was Redux, seem good it have state managment and a file structure for work (like layers) but work better with Api Rest and we want to use Graphql.
The other option is use only Graphql and Apollo, because Apollo have it's own state managment and similar options that can replace redux, but if we use this option, what architecture can we give it? mvp? or mvvm? Is it posible with Reactjs?.
If some one with experencie with Reactjs can advise us, we would appreciate it =)
I think you should first understands the benefit of using ReactJs within your project. By saying this I mean to say that React and Redux are independent of each other. These are two different libraries.
React offers it's own benefits such as virtual DOM manipulation, lightweight, used with styled components and many more.
On the other hand Redux is kind of state management library that is based on centralized state management pattern and can be integrated with any JS framework.
With React you get the flavor of creating SPA's or even you can provide the illusion of SPA having multiple pages inside your App.
With React you can use other JS libraries without any obstacles as it is very user friendly and compatible with almost all latest browsers and even to aid the support there are various other libraries too.
I feel the hardest part going the Apollo/GraphQl pathway is deciding patterns rather than learning the syntax.
Having moved all app store from Redux to Apollo cache I am a few days later still struggling with a best way to have components communicate and commonly access the Apollo store.
I could write pages about different implementations but the questions remains as I haven't found any articles or code examples and the forums are dead silent about this - how are others doing this?
To add some to the discussion I have only one React state in top-level (parent) component:
{dispatch: (...dispatch function...), actionType, actionPayload}
and distribute these through by props and React Context to child components deep down the tree. Parent then monitors dispatched functions and handles most of them (like data manipulations) and passes unhandled actions down the tree. It feels much like Redux but the store is 100% in Apollo.
This has been a thready path and I feel my current pattern will likely change a lot so I'd love to hear from others. Components communicating and app store are the core of every app, surely there must be others out there?!
I have written a create-react app which has a dependency on Redux. I would like to package up my app in an NPM package so I can use it in another site that I am building which also uses redux.
I was wondering if it is possible to package up my app provided that it has a dependency on Redux?
Sure you can! But there are some caveats in this approach:
You will need to synchronise the versions of React/Redux in both packages because it would be really bad to have multiple versions of these libraries on your website (performance).
If you'd like transfer data between those two apps you'd have to expose some kind of API which will allow to do that (because both apps will work on separate Redux instances.
If you want to make modular apps you could go another way:
Create an React/Redux app but don't make it setup Redux itself - just expose the reducer.
Anywhere you'd like to use the created app - just import the reducer and plug it in in your Redux instance.
This approach will be a lot lighter for the user :)
Reference MV* Architecture using React js
I understand that React is an View Engine and it still requires many other libraries like Redux..etc.
Is there a list of libraries to be used along with React to build a complete ecosystem like Angular ?
The React/JS ecosystem has become so rich, you can't really decide of a set of libraries to use by default in every projects.
It really depends on your needs.
Many people choose to generally go with react-router for the client-side routing, react-dom to interact with the DOM, redux for the state management, and react-redux to connect your components to the redux state.
You might find better answers by looking at the code of these react boilerplates, some of them explain there choices: http://andrewhfarmer.com/starter-project/
One of the key decisions in choosing React over Angular for us was that React is a technology, not a framework.
The ability to mix librairies to your needs is the big plus; there is no best list. As a quick example, redux makes tons of sense for us for the webapps, however it does not for the react-native mobile app where it may not blend well with the Navigator or may be overkill...