My objective is to do these functions one by one when the previous is finished and activate some kind of loading meanwhile these functions are in progress.
Instead there is visible, that all functions ignores await a process after this loadable component.
Why this is happening and how I can reach that function will start when the previous is done? I am trying to do all of this in componentDidMount(). I have @babel dependencies v7+.
In console is visible, that this async/await function is ignored and the loadableComponent is finished before all function starts.
edit: More reproducible example:
"base_coponent" (defined LoadableComponent which extends React.Component)
export class LoadableComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
loading: true,
loading_counter: 0
}
}
activateLoad() {
let i = this.state.loading_counter
console.log("setting loading", this.state)
this.setState({loading: true, loading_counter: i + 1 }, function () {
console.log("after setting loading counter", this.state)
})
}
deactivateLoad() {
let i = this.state.loading_counter
console.log("in deactivateLoad", this.state)
if (i == 1) {
console.log("disabling loading")
this.setState({ loading: false, loading_counter: 0 })
} else if (i <= 0) {
console.log("disabling loading")
this.setState({ loading: false, loading_counter: 0 })
} else {
console.log("setting loading")
this.setState({ loading: true, loading_counter: i - 1 })
}
}
user action (from where is exported function getAppuser() and rest of functions)
export function getAppuser(appuser) {
return dispatch => {
let url = `${config.server}/fs/data/getAppuser/${appuser}`
axios.get(url).then((data) => {
dispatch({type: list.user.GET_APPUSER, data: data.data})
}).catch(
err => {
console.error(err)
}
)
}
"index" (the palce of happening. specifially class Content extends LoadableComponent)
1) defined async loadable
async loadable(b, e = (err) => { console.error(err) }) {
this.activateLoad()
try {
await b()
this.deactivateLoad()
} catch (err) {
this.deactivateLoad()
e(err)
}
}
2) componentDidMount()
this.loadable(async () => {
try {
console.log("start of Loadable")
await this.props.dispatch(getAppuser(appuserID))
await this.props.dispatch(getSettings(appuserID))
await this.props.dispatch(getAppuserRank(period))
console.log("in the end of Loadable")
} catch (err) {
console.log(err)
}
})
package.json just some of all depenedencies and devdependencies, which i found as important by some other tutorials in my case
"devDependencies": {
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.9.6",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.9.6",
"babel-loader": "^8.0.0",
"babel-plugin-add-module-exports": "^0.3.2",
"babel-plugin-react-html-attrs": "2.0.0",
console log when i apply the logic from Bergeron topic - the difference between this console log and console log i put in top is, that the log "after setting loading counter" is no more visible, which is not right by me.
trying 1) tried to create: new Promise in user-action. But in this case, Iam getting an error, that Actions must be plain objects. Use custom middleware for async actions.
export function getAppuser(appuser) {
return new Promise(function (resolve, reject) {
return dispatch => {
let url = `${config.server}/fs/data/getAppuser/${appuser}`
axios.get(url).then((data) => {
dispatch({type: list.user.GET_APPUSER, data: data.data})
}).catch(
err => {
console.error(err)
}
)
}
})
