If so will this lead to a performance issue ?
Secondly
Is there a way to specifically call a reducer without invoking all 100 reducers ?
This is specifically answered in the Redux FAQ:
https://redux.js.org/faq/performance#wont-calling-all-my-reducers-for-each-action-be-slow
It's important to note that a Redux store really only has a single reducer function.
However, even if you happen to have many different reducer functions composed together, and even with deeply nested state, reducer speed is unlikely to be a problem. JavaScript engines are capable of running a very large number of function calls per second, and most of your reducers are probably just using a switch statement and returning the existing state by default in response to most actions.
Also, "call a reducer" is the wrong mental model here. Actions are like "events" that are being broadcast - you don't ever "call a reducer" directly:
https://redux.js.org/style-guide/style-guide#model-actions-as-events-not-setters
Why reducer must return new state what is the reason for that .Why can't we return the updated state? Is that the pattern that we must follow or what?Also please let me know that ngrx and redux are they completely different?
I think because the view layer needs to compare current state and previous state, they should be different objects. Also, it can support other features like debugging, time travel.
In both the library, They return a newly modified state or the original state
Just going through the official docs of both NgRX reducer and Redux reducer
NGRX Reducer
Reducers in NgRx are responsible for handling transitions from one state to the next state in your application.
Reducer functions are pure functions in that they produce the same output for a given input. They are without side effects and handle each state transition synchronously. Each reducer function takes the latest Action dispatched, the current state, and determines whether to return a newly modified state or the original state
Redux Reducer
Reducers specify how the application's state changes in response to actions sent to the store.
Regardless of the state management pattern, You need to change the state through reducers as actions are responsible fpr source of information for the store. They are the entry points to interact with store in Both NgRx and 'redux', moreover in Vuex too.
As per the state management library implementation, I guess they both follow same principle of Actions, Reducer to update the state async. There might be some possibly they may have different feature.
Hope this helps!
Both libraries aim to manage a state which is only manipulated in particular, predefined ways; reducers are the access they provide to the state.
By limiting the ability to manipulate the state directly, they make it easier to understand how a particular state was reached; it is always possible to reach a particular state by dispatching the same actions again, and a given state can only be reached as a result of the actions dispatched to state (at least, this is the ideal - impure* reducers would potentially lead to different states being reached from the same actions).
If we imagine a state manager which allowed functions to manipulate state, which is what would be required to return a mutated version of the original state, then it would be far more difficult to understand how a given state was reached, as the store could have been manipulated at any point by any function.
This article gives a good overview of the key ideas behind redux and explains why redux does the things it does. Here are the relevant parts for your question:
State is read-only
The only way to change the state is to emit an action, an object describing what happened.
This ensures that neither the views nor the network callbacks will ever write directly to the state. Instead, they express an intent to transform the state. Because all changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for. As actions are just plain objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes.
Changes are made with pure functions
To specify how the state tree is transformed by actions, you write pure reducers.
Reducers are just pure functions that take the previous state and an action, and return the next state. Remember to return new state objects, instead of mutating the previous state. You can start with a single reducer, and as your app grows, split it off into smaller reducers that manage specific parts of the state tree. Because reducers are just functions, you can control the order in which they are called, pass additional data, or even make reusable reducers for common tasks such as pagination.
I have far less experience with ngrx, though as it seems like a redux-inspired store, I'll presume it follows more or less the same principles. I'd be happy to be proven wrong, in which case I can update this answer.
*An impure function function would do one or many of the following:
Access state other than the arguments it was passed
Manipulate the arguments it was passed
Contain a side effect - something which affects state outside of itself
Mutating state is the most common cause of bugs in Redux applications, including components failing to re-render properly, and will also break time-travel debugging in the Redux DevTools. Actual mutation of state values should always be avoided, both inside reducers and in all other application code.
Use tools such as redux-immutable-state-invariant to catch mutations during development, and Immer to avoid accidental mutations in state updates.
Note: it is okay to modify copies of existing values - that is a normal part of writing immutable update logic. Also, if you are using the Immer library for immutable updates, writing "mutating" logic is acceptable because the real data isn't being mutated - Immer safely tracks changes and generates immutably-updated values internally.
From Redux Doc.
In flux I'm wondering, is it okay to
make async operation
change multiple values (by different keys) in state
trigger actions
in a single store? If I need to update 2 keys of store, should I create another store to separate concerns and make store responsible for a single first level property in state?
E.g. in Redux reducer is responsible for a single first level key on resulted object, asaik
Make async operations:
Typically it is better to keep your stores synchronous... they should be dumb and just receive data. Makes everything easier and testable! The action creator should dispatch the appropriate action once it has resolved.
Change multiple values (by different keys) in state:
This isn't that bad, but as you eluded too, perhaps you need to rethink how your app state is structured. It depends on the action though... hard to say without knowing the context.
Trigger actions:
Your views are responsible for triggering actions... So stores should not trigger actions!
Some links:
Async requests with React.js and Flux, revisited.
Using a Redux store in your React.js application
I'm refactoring (for fun, ha) my redux application to relay. In the redux application a failed event would dispatch an action with the failure message.
This would be picked up by an 'Alert' reducer that would then present an alert to the user. This would be kept in the global state for x seconds before being removed.
The Alert component would sit empty until there were alerts dispatched to fill it.
How would this be done under Relay? Is there a way to mutate only the Store rather than dispatching a GraphQL mutation?
Thanks for the help :)
One option would be to have alert in your schema (you could even just include it in your local schema, though you'd probably have to change the way babelRelayPlugin gets its schema) and use applyUpdate to change it.
I have never tried that, nor do I think it's what the devs had in mind for it, but it might just work.
In its current version Relay isn't really made for local state, but apparently it's on the roadmap for Relay 2.
Is there any tool out there which can generate sequecne diagrams from redux actions calls ? Basically i have written a client side applciation using javascript, Redux and Angular and want to generate a sequence diagram
The short answer: I didn't see anything like that until now.
But it should be relatively easy to implement, here are some of my thoughts:
With Redux you already should have most of the stuff in your hand:
The communication partners are various web components which are triggering actions and/or subscribing to the store.
A request between a communication partners is represented by a dispatched action.
Each time an action has been dispatched we persist (depending on the application perhaps as part of the state) the following information that is later needed to draw a sequence diagram:
the communication partner that triggered the dispatch of the action (a property within the action)
the action type
the receivers, i.e. the communication partner(s) that is(are) interested in the changes that were triggered by the action. This could perhaps come from additional "acknowledgement" actions triggered by the receivers or from a static configuration that contains a mapping of which subscribers are interested in which parts of the state.