score:1
your solution is fine as it is, but as you mention you are not utilizing the potential in flux. if you utilize flux you do not need to use promises to keep track of your async calls. the numbered list of actions you mention is just a regular flux data flow.
with flux you would have a userstore where you could store if this user was authenticated or not (plus other data you would want to store about a user). you could then just prompt the loader until you got an event dispatched from the userstore telling you that the user is authenticated or not.
var authenticateuser = function(username) {
<getrequesttoauthentticationresource>
.then(function(data){
<storedatainuserstore>
emitauthenticated();
})
}
var userstore = _.extend({}, eventemitter.prototype, {
dispatcherindex: appdispatcher.register(function(payload) {
var action = payload;
switch (action.actiontype) {
case userconstants.authenticate:
authenticateuser(action.username);
break;
}
}
under is an example of how your app would listen and handle the event. just to clarify, this is a very simple component. you could check the authcode in a better way than with an if-else.
var yourapp = react.createclass({
getinitialstate: function() {
return {
authcode: "loading"
}
},
componentdidmount: function() {
userstore.addauthlistener(this._onchange);
},
_onchange: function() {
setstate({
authcode: userstore.getauthcode() //sucess or fail
});
}
render: function() {
if(this.state.authcode === "loading"){
return <load information>
} else if(this.state.authcode === "success") {
return <success information>
} else {
return <fail>
}
}
then your react-component would just have to see what data it would get and show either the user information, error or the loader.
just remember you need an addauthlistener in your store and an emitauthenticated to make this work.
best practice is to do the getrequest where you dispatch the actions, and when that returns you notify the store. however, as seen in the example, you can do it in the store as well.
Source: stackoverflow.com
Related Query
- Can I send several events on action in flux?
- Can I send an AJAX call in React and Redux without action creators and reducers?
- Flux react, can an action get a store?
- Can i send full store object from container to action creator (React/Redux)
- How can I avoid requesting redox-saga action several times?
- Can I dispatch an action in reducer?
- React - Can A Child Component Send Value Back To Parent Form
- What's the use of mapDispatchToProps when we can just use this.props.dispatch to dispatch action
- Why do Flux architecture examples use constants for action types instead of strings?
- Should I use one or several action types to represent this async action?
- what is this difference between this flux action and this function call?
- How can we send OAuth2.0 with axios in React js
- Can a Redux action affect multiple parts of the state tree?
- In redux-observable - How can I dispatch an action "mid-stream" without returning the value of that action?
- How can I send FormData with axios patch request?
- Material ui Autocomplete: can tags be created on events aside from 'Enter' events?
- Can I apply Flux architecture with ReactJS.net?
- How does react redux promise middleware send the resulting action to the dispatch?
- How do I manage state on a React component that can have state changed from the parent or from events upon it?
- Can flux actions access stores?
- How can i dispatch an action from a helper function in react native
- How can I export the type of an Action creators return value using Flow?
- Can we add events on react fragment?
- What is the method can I use to send an event from native module to JS in React Native
- How can I return result of action after dispatching in redux?
- How to fetch data with multiple requests in Redux action creator and then send collected data to reducer?
- Can I use condition in my action reducer?
- How can I unit test a component which dispatches an action in reactjs/redux app?
- What are the different types of props can be send from one component to the other using properties in React?
- How can I test an action with jest if this action has thunk and axios?
More Query from same tag
- How to add class to previous iteration when current Iteration is true in react?
- Stubbing of react-router hooks like 'useLocation' is not working
- React functional component: TypeError: handleFlagChange is not a function
- Submit form on checkbox change and keep built-in browser validation
- Number formatting using regex with special characters
- Material ui card open in new tab on Ctrl+click
- React(next.js) is giving me "handleSubmit is not defined"
- Uncaught Invariant Violation : Maximum update depth exceeded
- PayPal .Net transfers from a customer to another customer
- i can't switch between pages with react-router
- Save multiple results in the localstorage
- how to use the useEffect hook on component unmount to conditionally run code
- react-hook-form onSubmit not triggered
- mapDispatchToProps dispatch action not working to update State
- How to detect if another component is present in the document?
- React and Apollo useMutation --- Cannot read property '0' of undefined
- React app not rerender after store state changed
- What is the way to set X-Frame options in react app
- How to solve dependency error in gatsby js?
- React-Router - How to automatically pass a current param to a "<Link>"?
- How to access prop in child of child component
- Typescript axios typings
- Advice Needed: How to properly connect React to MongoDB
- Webpack won't resolve modules without .jsx extension despite resolve being set
- react onchange push values to objects
- reactjs - load json object
- How to make custom select dropdown in React JS
- How can I do that when the home view navigates to the login view, trigger the useEffect of the login?
- How to inject logic from a function into a script element dynamically
- jest.mock invariant variable access: __extends