erikras / erikras/react-redux-universal-hot-example

onEnter called multiple times

Open
#1,234 1 comment 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.1k
Forks
2.5k
PR merge metrics
No merged PRs in 30d

Description

EDIT: A much simpler way to reproduce

```
console.log('Home page')}/>
```

Shows `Home page` 3 times. Twice on the client console, and once on the server side.

I'm keeping the below just for reference, otherwise the above is enough to replicate the problem.

---

I've seen some references to this issue elsewhere, but the fixes outlined (using react-router-redux, check for multiple dispatches) seem to be taken care of.

I've added this to my routes file:

```

```

And this is the `onEnter` function

```
import {verifyEmail} from 'redux/modules/user';
import {createFlashMessage} from 'redux/modules/flash';

export function verifyEmailAndRedirect({dispatch}) {
return ({params: {token}}) => {
dispatch(verifyEmail(token))
.then(
// Success
({message}) => {
dispatch(createFlashMessage(dispatch, message, 'info', true));
},
// Failure
message => {
dispatch(createFlashMessage(dispatch, message, 'danger', true));
}
);
};
}
```

The URLs associated with this route are never linked to in the app, so a fresh app load will always occur. Therefore, whenever I test this, I refresh the page with a URL that will trigger this route. What I've noticed however, is 3 flash messages are always created. If I place a `console.log` call just before the `verifyEmail` dispatch, I get 2 calls on the client, and 1 on the server.

If I use react-router's async `done` callback, I get 2 rendering, and a warning in my console telling me that the server render and the client render are different.

Anyone have any idea where I might start troubleshooting this issue? I'd rather not hack around the problem with debounces.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.