0

Context

I've built an app that renders mails from your outlook accounts into a web page in react. I'm trying to set a "viewed" boolean as a class property fed by redux store and change it from within the component (that change must impact in redux to manage that change on the overall app )

Problem

As you might see on below's code, i initiate the instance variable in the constructor with the given information from redux reducer, I've tested with a bunch of console logs if the action creator successfully updates that information on the store and it actually does. My problem is that my instance variable (this.viewed) isn't updating with redux's reducer information (that actually does update)

import React from "react"
import {connect} from "react-redux"
import { bindActionCreators} from "redux"
import * as QueueActions from "../redux/actions/actionCreators/queueActions"

class Mail extends React.Component {
    constructor (props){
        super(props)
        this.id = props.id
        this.viewed = props.mails.find(mail => mail.id = this.id).viewed
    }
}

componentDidMount = () => {

    this.props.queueActions.setMailToViewed(this.id);
}

function mapStateToprops () {
    return {
        mails : store.queueReducer.mails,
    }
}

function mapDispatchToProps() {
    return {
        queueActions : bindActionCreators( QueueActions, dispatch ),
    }
}

export default connect ( mapStateToprops, mapDispatchToProps ) (Mail)

Question

what am i doing wrong here? why does the viewed property on redux updates but my instance variable that feeds from that very same information doesn't? shouldn't this.viewed update whenever the props that provided the information update? Can't i update this information from props without using a state?

Community
  • 1
  • 1
Esquilax
  • 43
  • 6

1 Answers1

1

I think the issue is because the assignment to this.viewed happens in the constructor, which is only called once. When the redux store updates, the component will get new props but the constructor will not be called again, so the value will not be updated. Hopefully these links will help explain the issue:

ReactJS: Why is passing the component initial state a prop an anti-pattern? https://medium.com/@justintulk/react-anti-patterns-props-in-initial-state-28687846cc2e

I'd also recommend reading up on functional components v class components and why functional components are used alot now instead of class ones. A starting point:

https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108

If you used a functional component, you could use the useSelector hook to access the store and update your components.

Hope this this useful, I'm quite new to react so apologies if you're looking for something more, but I hope this helps.

jb7
  • 81
  • 1
  • 4