In the async fetch of the AUTH_LOGIN we want to dispatch an action after we fetch data from additional endpoints (apart from the login endpoint, for example we call another endpoint to bring data for the account, etc.).
We have all in place (action, reducer, used the combineReducers, etc.), but we are not sure how we can "connect" the authClient function in the authClient.js file, as this is not a component in order to use the connect function.
How could we dispatch an action then?
As you can see in the authentication side effect, the data returned by your authClient will be set as the payload of the USER_LOGIN_SUCCESS action which will be dispatched automatically when the authClient resolve.
To apply any logic to the authentication payloa and eventually dispatch some custom actions, you'll have to create a custom saga which will react to USER_LOGIN_SUCCESS actions.
We should definitely add an example in the documentation
Related
I have a parent-child states that manage reports and documents respectively.
When a report is submitted, I need to store the user posted data for the report and the async action returned id in the parent state, and the async action returned document in the document state.
Since I need the async action returned data in two different state actions, is there anyway to acomplish this without dispatching another action from the parent?
In React apps with redux toolkit different state slices can listen to pending/fulfilled/rejected states for the same async thunk so I was wondering if there is something similar for NGXS.
Thanks.
I know I can dispatch actions from another action providing different payloads so other sub states can listen to them and update accordingly, but I was hoping to accomplish that in one action.
I've also thought about calling the http async action first and after getting the result dispatch the store action but not sure if this is an anti-pattern.
I am exploring Remix.run and I have a scenario where I need to execute multiple api calls initially.
Let's say a product list route with a dropdown, I need to load the products then the dropdown values from external APIs. Do I make both API calls in loader?
If the API endpoint for the dropdown values relies on having a product selected you can just make the call in the selection event handler (client side).
If you want to make the call on the server side then it would make sense to use a useFetcher, then on the selection handler call .submit() passing the arguments as well as the action (if you want to use a Resource Route you need to pass its path, otherwise it will default to the component's closest route action) and method (defaults to POST) to use. Then retrieve the values in the component from .data when they come back from the endpoint.
In case both API calls are unrelated (a.k.a not having to select a product to feed the dropdown) then you might as well call both endpoints from the loader.
In any case, just make sure to fetch your data as soon as you have all the necessary data to do it (if that's on the loader step, do it then, if that's on an event handler, do it there).
Checkout Remix docs regarding data loading.
When Reducer update state and I get state from store it returns a promise. Inside promise in values I have my data How can I access this value in promise.
enter image description here
To use async actions with Redux, you are going to want to use a middleware, mostly either redux-thunk or redux-saga. See Why do we need middleware for async flow in Redux?
As a beginner at Redux you should probably start with the official documentation on the topic.
I am facing trouble to call or fetch third party API for wit.ai.
How can i make AJAX call to fetch "weather" information and bind it to converse method.
In image context - wit.ai story fetchWeather(context) method. How to connect with ajax call to specific method for weather output.
FetchWeather(context)
so in NodeJs you can use callbacks or Promises to chain you're petitions.
Wit.ai has actions defined by yourself, each time Wit.ai send a messages, it calls the send action, but if you defined an action in your story, then all processes should be done inside that specific action (because it is execute before send action)
In the image above you can see my action named getFullName, inside there I chain promises to query the user name and then build the fullNameGreeting to insert in my context.
If you have any question, you should read the wit.ai tutorial and download the an implement version for Node or Python. https://wit.ai/docs/quickstart
Short version of the question:
Can I fire UI actions from the store?
Long version of the question:
I'm writing food delivery app with reflux. It's seems like I'm not quite
understand how actions should go in my applications.
I have BasketStore, StatusOverlay (component) and actions:
// BasketStore actions
basketSync
basketSync.Completed
basketSync.Invalid
basketSync.Failed
// StatusOverlay actions
statusOverlayOpen
statusOverlayClose
The application works the following way:
I press button and send basketSync action. Once it happened the overlay is starting to be shown and BasketStore sends request for the data to the server.
Then accordingly to server response I fire basketSync.completed, basketSync.failed, basketSync.invalid. When it invalid or completed I close overlay, otherwise I show another overlay.
The question is how should I manage actions? Should I listen to basketSync inside of StatusOverlay to open it and close it on basketSync.completed, basketSync.invalid or it will be better to listen to just statusOverlayOpen, statusOverlayClose and fire these actions somewhere inside of BasketStore.
Short answer: In the standard Flux architecture, Flux stores should only emit a simple CHANGE event, so, no, you can't fire UI actions from the store.
I've seen stores triggering actions in many Flux applications. Some people like to put their async work inside the action creators and trigger "completed" and "failed" "sub-actions" inside the callbacks of the async work, others put the async work within the store itself and in that case trigger the sub-actions from there. They key point, as I've seen it pointed out, is that in the callbacks you should trigger a new action, rather than update state directly, so that data mutations only ever happens as an effect of actions, not async callbacks.
But with that said, components should not typically listen to actions at all. They should only listen to updates to the store and reflect that update any way necessary. So with the points mentioned above, stores could listen to the "completed" or "failed" actions, and appropriately update their state to reflect the "completed" or "failed" actions. The components then render any "error" indications based on the store's state, not on actions directly.