CODEWITHSUNDEEP
reactjsreduxreact-redux
Sam
Sam

Reputation: 30388

State change is not pushed to child component in React/Redux app

I'm experiencing a strange problem where a state change in my Redux store reaches the parent component but not passed onto the child presentational component.

Simplified version of the code is this:

class MyParentComponent extends Component {

   render() {
      return(
         <div>
             <MyChildComponent files={this.props.selectedFiles} />
         </div>
      );
   }
}

function mapStateToProps(state, ownProps) {
    debugger; // I see that state change reaches here!
    return {
        id: ownProps.id,
        id2: ownProps.id2,
        selectedFiles: state.files.selectedFiles
    }
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(myActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(MyParentComponent);

Notice the debugger I placed inside mapStateToProps. I confirm that I can see the state change where I have the debugger which means everything is working up to that point i.e. action creator, redux store, etc.

I also confirmed that my child component is indeed getting its data from state.files.selectedFiles. I manually placed some dummy data in the selectedFiles array in my files reducer and my component displayed it correctly.

As I mentioned, the state change is reaching the parent component but not the child component.

Any idea what may be happening here?

Upvotes: 0

Views: 418

Answers (1)

Sam
Sam

Reputation: 30388

I resolved the issue. Here's what was causing this issue:

As I was updating my selectedFiles array, I was using a helper function which simply pushed the new file into the array i.e. selectedFiles.push(newFile);.

Looks like this was performing a shallow copy and the child component wasn't picking it up.

I changed the helper function to return [...selectedFiles, newFile]; and everything started to work fine.

Upvotes: 1

Related Questions