For example, the API has the getList() and deleteItem() functions. providesTags is configured to requery: after a deleteItem() request, a getList() request is automatically fired.
It is necessary to block the interface while the getList() request is in progress. How to do it?
I usually do this with isLoading, but it is part of a hook called on the component. And in the case of automatic re-request, the call occurs not in the component, but in the store
first, I miss understood your question
I think somehow you managed to call getList inside of the store.
you don't have access to the loading inside of the store because you have access to isLoading inside of Component, right?
first why you should do such a thing and if you must do it please provide some codes or explain more.
second I am assuming you do something like this
dispatch(api.endpoints.getPost.initiate()) then if so you should know RTK query have something called Matchers.
and throw this you have access to actions like matchPending, matchFulfilled and matchRejected.
Related
Angular front-end calls a service that must return observable.
I need to set the calling component's variable to a value from the service's observable, but I can't find a way to access the component variable.
Hoping I'm not missing something trivial, here is what I tried.
#Component
metadata
export class AppComponent {
hexResult: string = ''; <-- this needs to be set with data from the service
The service uses a filereader to read a local file. Service has reader.onLoadend that is triggered when the read is complete. After massaging the data a bit, I use a BehaviorSubject passed from the component to the service to send back the result.
But the component has to Subscribe to the Behavior subject. It then can process the result more, but cannot get the result back to the component, which then needs it to affect the html.
This is the code in the component that is receiving the data via BehaviorSubject ("binaryRetrieved"):
this.binaryRetrieved.subscribe( (binString) => {
console.log('received raw binary');
if (binString && binString.length > 0) {
this.hexResult = this.binService.binaryToHexString(binString);
}
});
"this.hexResult" is undefined because it can't see hexResult in the component declarations.
I'm lost... any hints?
Thanks in advance.
Yogi
I am soooo sorry to have wasted people's time with this question. If I had been a little smarter, I would have found the solution faster.
All component variables are accessible from within the subscribe/error/complete sections of an observable response. MY PROBLEM WAS: I had DECLARED a variable in the component, but not INITIALIZED (instantiated) it; thus it appeared to be "undefined".
What a waste of my time to find it, but even more I apologize for wasting yours.
Yogi.
I have a component that needs to display data that is fetched via an asynchronous http call to another server.
I have a service that fetches the data. It gets instantiated immediately, but the http call takes a few seconds to return. When it does, the page is already drawn and found errors for missing data.
In the ngOnInit() method of the component, I am attempting to fetch the data that is obviously not there yet.
What is the best/proper approach to fill in the data? is it to add a listener to the http response and then populate the component or is there another standard approach?
Thanks
I know I can add listeners in the component to subscribe to change events, but I'm wondering what the more correct approach is here.
The proper approach for this would be to use the async pipe.
Your .ts component:
export class MyComponent implements OnInit {
constructor(private service:Service){}
apiData$:any;
ngOnInit() {
apiData$ = thhis.service.getData();
}
}
And then in your .html component, you use the async pipe.
<div>{{apiData$|async}}</div>
You need to refresh the component when you receive the data.
I do that usually in the end of the call method.
I have working React-Native + Redux registration flow:
Fill inputs
Validate them in component (Formik)
Call action to store registerUser(formData)
Wait for saga to do async call to API
On API error call reducer REGISTER_ERROR what sets store variable formError to some message.
I have my component with mapped state to props (this error message is hooked to prop).
I am doing componentDidUpdate() and when the error prop from store is changed I fire ToastAndroid.show(errorMessage).
But my Toast is called multiple times, because componentDidUpdate is also called multiple times (Redux updating component multiple times).
I know quick workaround by for example creating local state visible and when this state variable is true then no other Toasts are shown.
Is there any better more common way to do it? It is pretty weird in my opinion to rely on Toast's onClose event to set the state variable to false.
As stated in the first answer it'd be good to see the actual code, but what you should be doing is only showing the toast message when the prop changes like this (assuming it's a boolean)
componentDidUpdate(prevProps) {
if(prevProps.showToast === false && this.props.showToast === true){
showToast();
}
}
Without the code, it's a bit hard to try coming up with a solution but I think I know at a high-level what you are trying to do.
If I were you, I would make the presentational component (toast UI in this context) just react to the store props/observables instead of calling the ToastAndroid.show() method directly in the life cycle method.
In terms of architecture pattern, I find this pattern works well with react applications. Hope this helps. https://medium.com/#dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
My problem is similar to this stackoverflow post
When I use async pipe to observe data from firebase and show it in chart, I can see the chart but prompt null error in console. Without async pipe, all errors are gone but I can't fetch data (duh it's async data). Help me please.
Cause
This is happening because the component cannot work with null values for results.
Why?
Async pipe is, as you say, used when you do not want to (or do not need to) subscribe in the component code, but do it in the template instead. Pipe, however, is a pure function: is has to return something each time it's called.
When th async pipe is called before data has arrived from the server, the pipe returns null, having no better value to offer.
Based on the screeshot of the error trace, it looks like ngx-charts-bar-vertical does not work when results is set to null and it breaks then.
A fix
You need to not render the bar chart component at all while data is not present. You can do this by utilizing the NgIf directive, which allows you to do a binding in the template with as. Super-useful for exactly these cases where you want to conditionally show a part of the template, but then re-use this value again.
<ngx-charts-bar-vertical *ngIf="surveyAnswers | async as answers"
[results]="answers"
></ngx-charts-bar-vertical>
While surveryAnswers observable doesnt emit anything, the component will not be rendred, thus there will be no error. When it emits, async pipe will catch that, trigger CD and it won't be null anymore -- it will be a truthy value, which then gets fed into a variable called answers that we use to feed into the results input of the component.
I'm very very new to react.js and Fluxxor and I haven't done web development for a while. :)
I was wondering where to put server calls (JQuery $.ajax()) in my code?
My actions are only dispatching calls like:
var actions = {
onBlubb: function (data) {
this.dispatch(cmd.BLUBB, data);
},};
Then I have one store which does some changes and calls the emit function to update the view. The whole cycle works fine (view, action, dispatcher, store)
Now I guess I should put my ajax call in my store class. Let's say i call my store "blubbStore".
But I want my store classes to be testable. That means I have to put the ajax call in another store class which basically does the server call and ...
Approach 1) ... triggers a success/failed action. This action is handled in blubbStore
Approach 2) ... stores the service call response in properties. Then blubbStore calls "WaitFor" and reads the data from this "service-caller-store" once the service call is done.
I guess approach 2 is not possible, because the WaitFor does not await asynchronous calls? That means approach 1 would be the solution?
(And the actions should dispatch only messages. right?)
Thanks
In my personal view and experience - it's better to put async call in actions with this logic - image
In this way you can dispatch an event, calling loading screen for example and then, when data is recieved dispatch new change with data.
In the end I believe it's a personal choice, aim for the method that will help you handle code better.