title: Redux state updates without dispatches
body: <p>I am using <a href="https://www.npmjs.com/package/multer" rel="nofollow noreferrer">multer</a> to handle image uploads to my Next.js app.</p>
  
  <p>The problem which is the baffling is the uploaded image doesn't persist. </p>
  
  <p>This is the <code>ImageUploader.js</code> component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './ImageUploader.css';
  import Modal from '../Modal/MyModal.jsx'
  import axios from 'axios';
  
  
  import { connect } from 'react-redux'
  import { bindActionCreators } from 'redux'
  import { loadAvatar } from '../../store/reducers/users/index'
  import { modalStateOn, modalStateOff } from '../../store/reducers/ui/index'
  
  
  // base api url being used
  class ImageUploader extends Component {
   constructor(props) {
    super(props);
   }
  
   componentDidMount() {
    this.setDefaultImage()
   }
  
   componentDidUpdate(previousProps, previousState) {
    if (previousProps.userAvatar !== this.props.userAvatar) {
  
    console.log("this.props.userAvatar in componentDidUpdate", this.props.userAvatar);
     loadAvatarImage(this.props.userAvatar)
    }
   }
  
   setDefaultImage(){
     var defaultImage =  '../../static/profile-avatars/assets/default-img.jpg';
      this.loadAvatarImage(defaultImage)
   }
  
   loadAvatarImage(img) {
      var { loadAvatar } = this.props;
       loadAvatar(img)
   }
   // function to upload image once it has been captured
   // includes multer and firebase methods
   uploadImage(e, method) {
    let imageObj;
  
    imageObj = {};
    if (method === "multer") {
  
     let imageFormObj = new FormData();
  
     imageFormObj.append("imageName", "multer-image-" + Date.now());
     imageFormObj.append("imageData", e.target.files[0]);
     this.loadAvatarImage(window.URL.createObjectURL(e.target.files[0]))
  
     axios.post(`http://localhost:8016/images/uploadmulter`, imageFormObj)
      .then((data) =&gt; {
       if (data.data.success) {
        console.log("data ", data);
        this.setDefaultImage();
       }
      })
      .catch((err) =&gt; {
       alert("Error while uploading image using multer");
        this.setDefaultImage();
      });
    }
   } // end upload function
  
   render() {
    // var {imageUploaded} = this.state;
    var {  userAvatar } = this.props
   console.log("this.props ImageUploader", this.props);
    return (
     &lt;&gt;
      &lt;div className="main-container"&gt;
       &lt;h3 className="main-heading"&gt;Image Upload App&lt;/h3&gt;
  
       &lt;div className="image-container"&gt;
        &lt;div className="process"&gt;
         &lt;h4 className="process__heading"&gt;Process: Using Multer&lt;/h4&gt;
         &lt;p className="process__details"&gt;Upload image to a node server, connected to a MongoDB database, with the help of multer&lt;/p&gt;
         &lt;form action="/uploadmulter" method="post" encType="multipart/form-data" &gt;
          &lt;input type="file" name="avatar" className="process__upload-btn" onChange={(e) =&gt; this.uploadImage(e, "multer")} /&gt;
          &lt;img src={userAvatar} alt="upload-image" className="process__image" /&gt;
         &lt;/form&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
    &lt;/&gt;
    );
   }
  }
  
  function mapStateToProps(state) {
   const { ui, users } = state
   const { isLoggedIn, userAvatar } = users
   const { modalActive } = ui
  
   return { isLoggedIn, userAvatar, modalActive }
  }
  
  const mapDispatchToProps = dispatch =&gt;
   bindActionCreators({ loadAvatar, modalStateOn, modalStateOff }, dispatch)
  
  export default connect(mapStateToProps, mapDispatchToProps)(ImageUploader)
  </code></pre>
  
  <p>I would think these two lifecycle methods would act as a fail safe for me to figure out what is going on...</p>
  
  <pre><code> componentDidMount() {
    this.setDefaultImage()
   }
  
   componentDidUpdate(previousProps, previousState) {
    if (previousProps.userAvatar !== this.props.userAvatar) {
  
    console.log("this.props.userAvatar in componentDidUpdate", this.props.userAvatar);
     loadAvatarImage(this.props.userAvatar)
    }
   }
  </code></pre>
  
  <p>But the <code>console.log</code> in the <code>componentDidUpdate</code> doesn't even fire? </p>
  
  <p>And here you can see the load image action gets fired multiple times???</p>
  
  <p>Any ideas why this happening and how I can get my image to persist?</p>
  
  <p><a href="https://i.stack.imgur.com/4W1i6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4W1i6.png" alt="enter image description here"></a></p>
  
  <p>Thank you for any input!!!</p>