question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Calling push on Redux Actions and LOCATION_CHANGED not called

See original GitHub issue

Hello.

I have a redux action who made an Axios call, I want to push if the request get sucess, I made this:

import axios from 'axios'
import { push } from 'connected-react-router'

export const DATA_FETCHED = 'DATA_FETCHED'

 export const getData = () => {
    return (dispatch) => {
        axios.get("http://myurl")
            .then(resp => {
                dispatch([
                    push(`/example/path/123`),
                    {
                        type: DATA_FETCHED,
                        payload: resp
                    }
                ])
            })
            .catch(e => {
                toastr.error('Error', "not found")
            })
    }
} 

The action completes, I get the data, and the URL changes, but the LOCATION_CHANGE and the router state stay the same.

Can somebody help me?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:13

github_iconTop GitHub Comments

1reaction
brenooscommented, Nov 8, 2018

Guys I solved in another way (not sure if its a good practice):

import axios from 'axios'
import { push } from 'connected-react-router'

import { LOCATION_CHANGE } from 'connected-react-router'
export const DATA_FETCHED = 'DATA_FETCHED'



export const getData = () => {
    return (dispatch, getState) => {
        let routerState = getState().router
        axios.get("http://myurl")
            .then(resp => {
                dispatch({
                    type: DATA_FETCHED,
                    payload: resp
                })
                    dispatch({
                        type: LOCATION_CHANGE,
                        payload: { 
                            location: {
                                pathname: `/example/path/123`, 
                                search: routerState.location.search,
                                hash: routerState.location.hash
                            }, 
                            action: "PUSH" 
                        }
                    })
            })
            .catch(e => {
                toastr.error('Erro', "Fundo ou Período selecionado não encontrado")
            })

It’s working for me

0reactions
brenooscommented, Dec 5, 2018

Thanks @zedwang I will try this later, for now I will keep the other solution, thanks

Read more comments on GitHub >

github_iconTop Results From Across the Web

redux-react-route v4/v5 push() is not working inside thunk action
This myAction is calling fetch() inside and should redirect after success. If I run this.props.history.push('/any') inside component, it works!
Read more >
Troubleshooting | Redux
Sometimes, you are trying to dispatch an action, but your view does not update. Why does this happen? There may be several reasons...
Read more >
An Introduction to the Redux-First Routing Model
It's a well-known routing library for React, and. ... The location is changed by dispatching Redux actions. The application reads location ...
Read more >
Build your own router - Full Stack Agile
This blog post will describe a simple router for single page web applications, written on top of Redux and React. Train Switch. What...
Read more >
History - React Router: Declarative Routing for React.js
history · length - (number) The number of entries in the history stack · action - (string) The current action ( PUSH ,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found