When I searched for Redux most of the time I get the answer
Redux is a predictable state container for JavaScript and comes as an
external library which can be used together with front-end frameworks
like React, Angular, Ember.js, Backbone, etc.
I did not get the definition actually. What does it mean by **predictable state container **?
And as a new tool, it should solve some problems with web development. So, what redux does and how it facilitates us?
I think when someone says that Redux is a predictable state container it means that redux has a very strict way how to change the data, sometimes called unidirectional data flow.
I mostly used it in React application, so I can tell which problem it solves in this case. While your application is small, you probably will not see the reason to use Redux, but when it grows, when you have lots of components which use the same data and have to communicate with each other, it becomes really painful to store all state somewhere in the root components and pass it through all the children. There may be performance issues as well, all components between a root one a chield which needs some part of your state will be re-rendered.
So using Redux easily connect your components and select those parts of the state which they need. Also, communication between components becomes much easier, instead of passing callbacks to props, your components just listed to state and represent it, any time you need to change a state just send an action.
Regarding predictable state management, Redux is some kind of event sourcing, instead of changing a state directly, so send actions (events) which describe how to modify the state and reducer applies these changes.
There are way more things to say about Redux, at least middlewares, if you are familiar with Rx, you can try to use redux-observable which are really powerful, you can listen to some actions or a state changes to combine it with others. I recommend you to take a look at redux documentation and some article like this, I believe you will find an answer to your question.
Related
I have a react component I'm importing into my project. Both my main project and the component use separate redux stores. Initially the component was just imported once and this had no issue, but when it's imported twice it uses the same redux store for both children.
How do I ensure that two imported children from the same library, that use redux, each use a separate redux store? Alternatively, what's a better solution? I tried trying to refactor how the store is used but didn't have much luck.
In the log I can see that the redux store is initialized only once on page load.
Redux is a global store. It is meant to be used as one store per application. While there are ways around that, documented here under "custom context", it is highly advised not to do that.
If you are using the same component twice with the same props, it should also use exactly the right data. If that is not the case, you likely should not be using a global state from the beginning, but keep that state as component-local state in those two components.
What's the company standard? If a company decides to adopt Redux, do I need to convert every state/prop into redux form?
For example. I have a loading/setLoading state for the home page. Can't see if being used in other places. Do I need to make a redux version of actions for it?
No, as stated in the Redux style guide (general reading recommendation!), you should Evaluate Where Each Piece of State Should Live.
Not everything needs (or even should) be global data. Only use Redux for stuff that is "global". It does not replace props or local component state!
I am studying Redux combining it with Flutter, and I have this question, does making stateful widgets make sense in Flutter if you follow redux architecture? I could think that for animations and little widgets it's better to make a stateful widget rather than a new attribute to the real appState, but I am not really sure... I need someone to clarify me this dummy question.
Redux is not even close to replacing StatefulWidget.
A simple example is animations. Each of them requires to store, dispose and interact with an AnimationController/Tweens.
Redux really is for a serializable state. Typically what comes from your API, which you may or may not want to store on the device.
StatefulWidget kicks in for everything else.
Definitely. Use stateful widget for rather short-lived UI state and Redux for longer-living state and state managed by business logic.
I have an use case in which I need to have multiple modules loaded in the view at the same time. Thing is, each of those modules might be as simple as a component, or a complex Angular module with a router and everything. I guess you could call it a plugable framework.
The number of modules I have to show or who they are is dynamic (I'm getting them from a server).
My first idea is that it would be good for this case if the feature module's router wouldn't be a singleton with the main one and also if they wouldn't update the url completly.
Each of the feature module should be able to be launched as a stand-alone app if bootstrapped (therefore, I do need it to be able incorporate all Angular 4 features including the router).
I managed to get something working by playing with the router and with named router outlets (secondary routes) but not sure how good that is in the long run.
How should I approach this?
I am in the early stages of attacking a somewhat similar scenario. In my app, the UI is organized in panels that are designed to stand alone on smaller displays, or side by side on larger. I find this approach works well for my routes, as my app is designed to edit a complex, highly hiegraphical document with many inter-related sections. e.g. User follows link on list to open detail, new detail panel appears to right... follows link on detail to related node... etc.
The solution I'm noodling with now is attempting to use an ngrx store that interacts with the router (and router-store) to dynamically create panels based upon router data. Well, technically it does not create the panels, it only serves the data that tells a component what to create and render.
I know my situ is not exactly the same as yours, but perhaps there's something in my approach that may help you find usefull or at least thought provoking.
Assuming I want to reuse a component with redux, what are my options?
In more detail:
Let's assume I have a generic list component with items and filter input. I want to use this component in 2 places. The component needs to be closed API, meaning it should dispatch and reduce the actions all within itself. It needs to handle state changes and show the filtered items as well.
Let's assume the reducers are exposed publicly to build the store.
What would be the best approach of building the state object, the reducer and the action.
The main issue is how to 'bind' each component to a different items property on the store state.
Update:
Here is a discussion very similar to my qiestion:
Using Redux in reusable React component. I commented on the discussion with a proposal I found. If it will be accepted I will post it here. Meanwhile you can answer my question with your proposals.
I'm new to Redux, and haven't tried the library yet, but MrEfrem/redux-fly seems to me as a very interesting answer to this problem.