0

There are several questions and answers related props vs state, but I'm still confused. In short, documentation and answers agree that props should be immutable and state mutable. But the whole idea of mapStateToProps is to be able to update the props when the state changes; and subsequently trigger a re-render? So why does does this crucial method exists?

I need to display a modal notification popup. The notification should be displayed once the data is added to the state, and only if there exists such a notification.

function mapStateToProps(state) {
    return {
        notifications: getNotifications(state),
    };
}

The problem: According to best practice I should use access the state in my render(), since it may change at any time. I.e. this.state.notifications. But mapStateToProps never updates the component's state. So, to get the desired effect I need to use this.props.notifications -the anti pattern.

render() {
   return (
        {this.props.notifications.length > 0 && (
        <Notification
            isVisible={this.props.notifications.length > 0}
            title={this.props.notifications[0].title}
        />
        )}

       <SomeOtherAlwaysVisibleViews />
);

The above is working. I don't see why I should trigger on prop changes and use setState instead, just to use state instead of props in render()?

Jonas R
  • 1
  • It sounds like you are confusing redux idioms with react idioms. `mapStateToProps` is redux only. – Davin Tryon Oct 10 '19 at 09:53
  • And where do you have read this is an anti-pattern? it totally makes sense to me – Oriol Grau Oct 10 '19 at 09:54
  • Yes, it is a redux idiom, but this time also in a react context- render() – Jonas R Oct 10 '19 at 09:56
  • Pretty much any answer on stackoverflow or google would state that props should be considered immutable. Some examples: https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react https://stackoverflow.com/questions/38202572/understanding-react-redux-and-mapstatetoprops – Jonas R Oct 10 '19 at 09:59
  • 2
    You may be confusing the internal component state with the redux application state. These are completely different concepts. The redux state is more similar to component props than internal state. It should be immutable meaning that each change to the state creates a new state object – apokryfos Oct 10 '19 at 09:59
  • I think there is a little bit of confusion here: immutable means that can't be mutated, but it doesn't mean that it can't change. It means that when you want another value in a specific variable for instance you should replace the value entirely with a new value. – Oriol Grau Oct 10 '19 at 10:02
  • In the case of props, they can't change, but when rerendering, they can hold new values – Oriol Grau Oct 10 '19 at 10:03
  • @OriolGrau very good point. Definitely a misconception from my side – Jonas R Oct 10 '19 at 10:04
  • Happy to help :-) Immutabilty is a tricky concept, actually it took me a while to understand why we actually need immutability in react/redux – Oriol Grau Oct 10 '19 at 10:13
  • So, it's clear now that my implementation above is correct, and my confusion came from my misconception of immutable. Thanks all – Jonas R Oct 10 '19 at 11:21

0 Answers0