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.

[10.0.0-rc1] Really weird issue with react-redux connect()

See original GitHub issue

So I’m running slightly newer than -rc1 based on the git from ~18h ago. Running with a particular route under react-router-dom with a route like /foo/:id I have a relatively simple component which is connected to the store with react-redux and toggles between null and a sub-component view based on the value from the store - in test case below the string foo. When the id value changes a different prop (song) is passed to the subcomponent. The bug is that when the component is showing on a page and the store changes to make render() return null, the component hides correctly. But when I navigate to a new id (ie doesnt unmount, but props change) the component is rendered in its old form even though render() is still called and returns null.

If I switch away from using the connect() function to directly subscribing and changing component state based on the store value then the component behaves correctly. Switching to react 16.9.0 also does not display this issue.

Smallest case I can reproduce with in my app (ie inside the routing) is below. This is the one that doesn’t work:

class _PresenterView extends Component {
    render() {
        const { song, is_active } = this.props;

        if( !is_active )
            return null;
    
        return 'foo';
    }
}
export const PresenterView = connect(state => ({ is_active: state.cast.active }))(_PresenterView);

And if we connect manually to the store then this works correctly:

export class PresenterView extends Component {
    componentDidMount() {
        store.subscribe(() => this.setState({ is_active: store.getState().cast.active }));
    }

    render() {
        const { is_active } = this.state;
        const { song } = this.props;

        if( !is_active )
            return null;
    
        return 'foo';
    }
}

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:17 (11 by maintainers)

github_iconTop GitHub Comments

1reaction
JoviDeCroockcommented, Aug 13, 2019

What versions are you running from the sub-libraries, it would probably help to make a minimal codesandbox. This ensures that we aren’t looking at an issue with another library introducing an issue.

Codesandbox simplifies checking if it works with an earlier version as well.

0reactions
JoviDeCroockcommented, Jan 16, 2020

This should be fixed in the stable version

Read more comments on GitHub >

github_iconTop Results From Across the Web

React-Redux @connect syntax error - Stack Overflow
I'm new to using React and Redux, I'm building a simple todos application. I am writing my application using the create-react-app tool in...
Read more >
Troubleshooting | React Redux
Reducers should never mutate state, they must return new objects, or React Redux won't see the updates. Make sure you are actually dispatching ......
Read more >
React, Redux, and Immutable.js: Ingredients for Efficient UI
Data Reference Problem. React is all about performance. It was built from the ground up to be extremely performant, only re-rendering minimal parts...
Read more >
How Redux Works: A Counter-Example - Dave Ceddia
It's actually react-redux that lets you connect pieces of the state to React components. That's right: redux knows nothing about React at ...
Read more >
Redux connect()() is confusing. Why not use subscribe()?
And you get a more clean code base. The second advantage of using connect() is that your React components get decoupled from Redux....
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