Trying to get a redirect working with push using ConnectedRouter, my redux mapStateToProps is giving an error

Question

My application is not able to redirect using:

dispatch(push("/welcome"));

I tried to follow the tutorial here but using a ConnectedRouter.

The redirect seems to work as the URL changes now, but only the URL location changes and the view does not re-render and doesn't display the html for the /welcome page.

https://7wm1z5q666.codesandbox.io/welcome)

I created a live running example of my scenario, hoping someone can help me make sure I have all the pieces in place.

https://codesandbox.io/s/7wm1z5q666

When I click on the 'sign in' button, it seems to redirect /welcome but the component doesnt' actually render. If I go directly to /welcome I get the error I posted. — Blankman, Mar 31 '18 at 04:05
Avoid using refs as it is useful when you need to find the DOM markup rendered by a component (for instance, to position it absolutely). You can use onChange — digit, Mar 31 '18 at 04:15
Where do you get this error specifically? `email of undefined` — Tomasz Mularczyk, Apr 02 '18 at 16:10
@TomaszMularczyk I updated the question, that doesn't happen any longer. — Blankman, Apr 02 '18 at 16:17
In your demo I can see the page being redirected to /welcome and the html content rendered — Shubham Khatri, Apr 03 '18 at 05:46
@ShubhamKhatri I implemented one of the answers below, just waiting until I am allowed to select the correct anwer. — Blankman, Apr 03 '18 at 11:31

Eric · Answer 1 · 2018-03-31T04:34:19.847

2

Your redirect code is fine.

Looks like you have problem here:

const mapStateToProps = state => ({
  email: state.users.email,
});

With an actual string, the page will correctly redirect and render.

const mapStateToProps = state => ({
  email: 'abcd@efg.com',
});

state.users is undefined, and it's because for some reason your state here is not pointing to the redux store, but react-router. I would look into your redux and router setup in Root.js.

edited Mar 31 '18 at 04:34

answered Mar 31 '18 at 04:27

Eric

2,635
6
26
66

How did you figure out the store pointing to the react-router? devtools or? – Blankman Mar 31 '18 at 15:19
I added another mapStateToProps `aaa: state` and tried printing it – Eric Mar 31 '18 at 15:54

Tomasz Mularczyk · Accepted Answer · 2018-04-02T15:44:15.373

Here is why view doesn't get updated when you change your route. And it is also described in react-redux troubleshooting section.

If your views depend on global state or React “context”, you might find that views decorated with connect() will fail to update.

This is because connect() implements shouldComponentUpdate by default, assuming that your component will produce the same results given the same props and state. This is a similar concept to React’s PureRenderMixin.

So the problem is within your ConnectedSwitch which will work if you change it to:

const ConnectedSwitch = connect(
  state => ({
    location: state.location
  }),
  null,
  null,
  { pure: false }
)(Switch);

or

const ConnectedSwitch = withRouter(
  connect(state => ({
    location: state.location
  }))(Switch)
);

It seems to me that state.location even though is coming from redux is being mutated not updated. That's why shouldComponentUpdate implemented by connect returns false.

Unfortunately, I don't get:

Cannot read property 'email' of undefined

so I don't know how to help you with that.

how can I figure out which component is being called but not re-rendered? In a more complicated reactjs app is there a way to debug this? Will my components shouldComponentUpdate be overriden? — Blankman, Apr 02 '18 at 15:54
@Blankman You need to look for implementations of [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate). If a component receives new props react will always re-render... unless shouldComponentUpdate returns false (by default always true). `connect` does shallow equal to received props and if they didn't change it will return false in this hook. This is why immutability is so important to always get a fresh view. — Tomasz Mularczyk, Apr 02 '18 at 16:05

Trying to get a redirect working with push using ConnectedRouter, my redux mapStateToProps is giving an error

2 Answers2