I've had something bothering me for the past couple of days and I can't seem to come up with a solution that I like. I'm using refluxjs, but I think its applicable to vanilla flux as well.
So, say I have a React ComponentOne that calls a flux action to post some form data to an API to create a Thing.
My store fires a "ok, a Thing is POSTing" event, and then in a bit fires a "ok, a Thing was created" event.
How is my ComponentOne supposed to disambiguate these events? ComponentTwo could have called the same action and we don't know which Thing-POSTed event corresponds to which component.
Maybe ComponentOne's data results in a failure event, whilst ComponentTwo results in a completed event...we've got two events, both of which are plausible events for both components to expect and no obvious way to tell which is which.
You can maintain the state of API data changes inside respective Store like isLoading, isLoaded and optional time stamp. Then inside View onChange event get the current state from Store and update respective View with current state.
see related solution - Calling other action on the basis of results of other action in React JS
Related
Let's say i have a property in the store called state.items.byId each time this is updated (various parts of the application) i want to intercept the value before i'ts updated and run a function to update some properties on it before it's updated.
I don't know the terminology and i'm quite new to redux, but if someone could point me in the right direction that would be great!
I have searched and found redux-watch but i'm not 100% sure if this is the right approach
below shows the data flow in a redux application. View dispatches an action, the action
object is a blue-print telling the reducer what changes it needs to make to the store state. Any
change in the redux store state needs to pass through this cycle.
redux-watch provides you a subscription based mechanism notifying you after a property is
changed. If you want to intercept a property before its changed you can write a custom
middleware and handle any side-effects inside it.
I have a query with redux + react native ..
I have a redux state that contains data, that data is constantly changing.
I also have several components that need to read this data.
The question is that all the components are on the screen, and when one makes a modification to the redux state, this must be reflected in the others too, I can not find any solution, the best thing would be something that makes the components render again that they are listening to the state but I can't do it .. I need help!
Try to use event emitter for call methods to get data from methods in all components.
Ref link:- https://medium.com/#filipedegrazia/using-custom-events-in-react-native-831a809f279d
Event emitter emits an event from one component to another to call any function or pass data also. Call get method in all components to emit method after data changed.
Looking for some advice when working with Redux, and Angular. I've been researching Redux for the past couple of days and really think its a great way to store application data. The part I'm having trouble with is whether to persist everything within the store or only certain parts. Ideally, I think the entire application should be running through the store, but for forms this seems very tedious.
For example, lets say I'm working with a form to add a new product. Here are some of my pain points.
I would like to keep the User Reducer (store) separated from the actual form state. Should I create a separate form reducer per component?
Having to persist every input field back to the store sounds like a lot of work. I've seen the library redux-form simplifies this, but is intended for React.
Anyone have any good advice when it comes to creating forms in Angular with Redux?
The answer is "it depends". Also, the assumption is that you''re convinced of the benefits of one-way data flow and redux, so prefer redux over two-way data binding if given the choice.
Uber-simple form (no validation, no complex relationships with other state). Then you could "go naked" and directly hook up the inputs to redux. In our use case, we actually decided to go with Angular forms because we figured it handles edge cases (IE and safari mobile).
Don't need every form change in redux state. Then the form submit can dispatch an action to update redux state. Things get tricky if the form needs to change in response to redux state. See below.
You do need every form change in redux state. Angular forms do not have a form#ng-change, so one strategy is to attach an ng-change to every input that dispatches an action to update the redux state. (Yes, it is error prone because it easy to forget to use ng-change, meanwhile the app appears to work.) Again, things get tricky if the form needs to change in response to redux state. See below.
Updating the form in response to redux state change
The common use case is actually very simple. A concrete example will help---suppose the form tracks app settings, meanwhile app settings exist as redux state. That is, there is a two-way data binding between the Angular form and the redux state. This is probably the common use case.
In this case, the solution is to proceed as before: update redux state from the Angular form by dispatching update actions, and update the Angular form from redux state via #mapStateToThis.
Angular ----dispatch actions-----> Redux
Form <----mapStateToThis-------- State
The only gotcha is to not pass the Redux state directly to the Angular form i.e., deep clone the data or use ImmutableJS.
The other common use case is to implement a "form reset", that is, reset the form to a "pristine" state after pressing a button, for example. Again, a concrete example will help:
Suppose that app state (redux state) tracks whether the state is pristine via a flag app.pristine. (To clarify how app.pristine works, it works as expected, that is, it changes to false as soon as any value changes, and changes to true only when explicitly set to true.)
First, as far as I know, Angular doesn't automagically keep track of the "initial" state. You have to do it yourself and you may as well put that state in redux. Then, the initial form values are just the app settings when app.pristine is false. (If you're thinking of putting this in #mapStateToThis, don't. Doing side effects in a transform function seems weird.) A better way is to use an asynchronous action, namely the form onChange listener:
// thunk example
onFormChange(newForm) {
return (dispatch, getState) => {
const appSettings = getState().appSettings;
const appIsPristine = appSettings.pristine;
// this will fire once because the next action will set it to false
appIsPristine && dispatch(initForm(appSettings)));
dispatch(updateAppSettings(newForm));
};
},
The reset action works as you would expect (which I won't outline).
To conclude, I should add that the above assumes that only the Angular form can dirty the app settings---otherwise, the initial form values may never be stored. If that's the case, then one idiomatic solution is to create a custom middleware that sets the initial form value whenever app.pristine changes to true. (Alternatively, use an Angular watch.)
Application data lives in stores
Application (ui) state lives in stores (there are different opinions tho)
When the user now submits a form and the server returns a validation error, hot do I get this error back to the view component (the form)? Since the (controller) view components only gets updated by change events from the store(s), the error would need to be added to a store. Other people say that in those cases the view components should be able to listen to events from the action creators.
Whats your opinion on that?
Possibly a duplicate of How to handle async errors in Flux?
In the case where the error doesn't really matter to the rest of the app and you don't need to log it, I'd just return the value right to the component. For example, say you're submitting a form and it comes back 422 or something...unless you want to do something with the error like store it, and none of the other components really care that it errors, don't worry about it...just update the state of the View Component.
Although generally speaking it's best to have state at the top most component, it makes sense for some components (like forms) to have a "transient" state that only matters to them...for example when you're typing in text to a box there's no reason to bubble that up to the top-level component usually.
I started with FLUX very recently, and need some advise on how should I update the component state and the store.
I need to set a toggle flag which is bonded to an onclick event, from what I understand in Flux architecture, I should call an action then trigger a dispatch event and then the store will update and emit update resulting my component to receive the update and re-render. (Please correct me if I'm wrong here)
Component Code look like this:
...
_updateState:function(){
this.setState({myTrigger: MyStore.myTrigger});
},
_onClickEvent: function(boolValue){
MyActions.updateTrigger(boolValue);
},
...
render: function(){
return: (
...<div onClick={this._onClickEvent}/>...
)
}
...
I wonder why shouldn't I just call setState directly which would trigger the re-render directly and avoid going through the full flux cycle which I don't really need since I will always pass in "true" for this function, which really is the same as not passing any data over to the store.
Code will look like this:
...
_onClickEvent: function(){
this.setState({myTrigger: true});
}
...
Seemly to me this is by-passing the flux single directly process flow concept and creating a component event loop within the component. Is this wrong to do? Can anyone help me understand the reasoning behind why this is a good or bad practice to do so?
Thank you very much!
DD
This is not wrong. The Flux data flow is intended to handle data which are either persisted or shared between components. If the data is only used in this component and there is no persisting of the data, the last example you show is the correct way. There is no need to overcomplicate things, that is not why Flux is there.
Flux gives you the uni-directional data flow architecture. This means that if your application wants to share or store data, then you want to use the Flux architecture. This way you can fetch or post data and then notify your components when the new data has arrived.
An example would be in a message system. You want to fetch a message.
First you trigger an action with MyAction.fetchMessage(message);
Then you do a get request to whatever application that stores your messages. When that returns you send the data to your MessageStorewhere you cache your data. After that you trigger an event from the store which tells the components that the new message has arrived. From there on the components just fetched the new message from the store and re-render.
That is when the Flux architecture is brilliant. It is easy to see the data flow through your system, which makes it easier to debug and easier to keep data separated from the components.