dispatch function is called on other actions every time updateIntl is dispatched

[Marcsimm]

I have a redux action that when it's dispatched fetches data from a external service. In the response I get from the backend. I Use a countrycode attribute and pass that as the argument as the locale argument.

fetch(`/api/article/${id}`)
                .then(response => response.json())
                .then((json) => {
                    dispatch(
                        updateIntl({
                            locale: locales[json.countryCode],
                            messages: formatLocaleObject(json.countryCode),
                        }),
                    )
                    dispatch(saveSettings(json.settings))
                    dispatch(saveData(json.eta))
                })
        })

When the pageloads I dispatch an action that fetches an article. I use the country code I get from the response as the arugment to update the right locale. I expect it to be called once But When I dispatch updateIntl It dispatches the same action again that is used to fetch an article. Casiung unesseray bandwidth and pageload time.

[Marcsimm]

No response?

[ratson]

Not sure what is your problem, I tell nothing from the snippet. It is unclear when you do the fetch, did you fetch run on every render? A more compete example would help.

[Marcsimm]

After some research, I found the problem is that My componentDidMount method gets called twice when I call updateIntl()

componentDidMount() {
            const {
                match,
                fetchArticle
                location,
            } = this.props

            const id = queryString.parse(location.search).id

            fetchArticle(id)
        }