title: Why isn’t my component receiving the updated Redux state?
body: <p>Why isn’t my state being updated in a connected component?</p>
  
  <p>My reducer:</p>
  
  <pre><code>import assetTypes from '../constants/assets'
  
  export const initialState = {
      isUploading: false,
  }
  
  export default function assetsReducer(
      state = initialState,
      action,
  ) {
      switch (action.type) {
          case assetTypes.ASSETS_SET_UPLOADING: {
              console.log('assetTypes.ASSETS_SET_UPLOADING', action.payload)
              return {
                  ...state,
                  isUploading: action.payload,
              }
          }
  
          default:
              return state
      }
  }
  </code></pre>
  
  <p>combineReducers:</p>
  
  <pre><code>import { combineReducers } from 'redux'
  
  import user, { initialState as userInitialState } from './user'
  import assets, { initialState as assetsInitialState } from './assets'
  
  export const initialStates = {
      assets: { ...assetsInitialState },
      user: { ...userInitialState },
  }
  
  const appReducer = combineReducers({
      assets,
      user,
  })
  
  const rootReducer = (state, action) =&gt; appReducer(state, action)
  
  export default rootReducer
  </code></pre>
  
  <p>My <code>mapStateToProps</code>:</p>
  
  <pre><code>export const mapStateToProps = state =&gt; ({
      isUploading: state.assets.isUploading,
  })
  </code></pre>
  
  <p>… and my action:</p>
  
  <pre><code>const setUploading = payload =&gt; ({
      type: assetTypes.ASSETS_SET_UPLOADING,
      payload,
  })
  </code></pre>
  
  <p>My saga:</p>
  
  <pre><code>// import DOMPurify from 'dompurify'
  import { get } from 'lodash'
  import {
      all,
      call,
      put,
      takeLatest,
  } from 'redux-saga/effects'
  
  // Actions
  import assetActions from 'store/actions/assets'
  import fetch from 'utils/fetch'
  import assetsTypes from '../constants/assets'
  
  // Selectors
  export const uploadURL = state =&gt; state.assets.uploadURL
  
  /**
   * Upload fingerprinted assets
   *
   * @function uploadAssets
   * @param {object} action Params pulled in from action
   */
  function* uploadAssets(action) {
      const { accountID, data, tags } = action.payload
  
      try {
          const url = yield call(
              fetch,
              `/account/${accountID}/asset/upload`,
              { method: 'POST' },
          )
  
          yield put(assetActions.setUploading(true))
  
          const response = yield call(fetch, url.data.body.url, {
              body: JSON.stringify({
                  ...data,
                  tags,
              }),
              method: 'PUT',
          })
  
          yield put(assetActions.setUploading(false))
          yield put(
              assetActions.setCollection({
                  collection: get(response, 'data.body'),
              })
          )
      } catch (error) {
          yield put(assetActions.setUploading(false))
      }
  }
  
  /**
   * assetsSagas
   *
   * Listens for action dispatch associated with each
   * saga within the 'all' effect
   *
   * @generator
   * @function userSagas
   */
  export default function* userSagas() {
      yield all([
          takeLatest(assetsTypes.ASSETS_UPLOAD_ASSETS, uploadAssets),
      ])
  }
  </code></pre>
  
  <p>Lastly, the component (removed everything unrelated):</p>
  
  <pre><code>import React from 'react'
  import PropTypes from 'prop-types'
  import { connect } from 'react-redux'
  
  // Actions
  import assetsActions from 'store/actions/assets'
  
  export class ModalAssetUpload extends React.PureComponent {
      constructor() {
          super()
  
          this.state = {
              parsedData: null,
              tagsSelected: [],
          }
      }
  
      componentDidUpdate(prevProps) {
          const { isUploading } = this.props
          console.log('isUploading', isUploading)
      }
  
      handleUpload =  =&gt; {
          const { uploadAssets } = this.props
          const { parsedData, tagsSelected } = this.state
  
          uploadAssets({
              data: parsedData,
              tags: tagsSelected,
          })
      }
  
      render() {
          ...
      }
  }
  
  ModalAssetUpload.propTypes = {
      isUploading: PropTypes.bool,
      uploadAssets: PropTypes.func.isRequired,
  }
  
  ModalAssetUpload.defaultProps = {
      isUploading: false,
  }
  
  export const mapStateToProps = state =&gt; ({
      isUploading: state.assets.isUploading,
  })
  
  export const mapDispatchToProps = dispatch =&gt; ({
      uploadAssets:
          payload =&gt; dispatch(assetsActions.uploadAssets(payload)),
  })
  
  export default connect(
      mapStateToProps,
      mapDispatchToProps,
  )(ModalAssetUpload)
  </code></pre>
  
  <p>If I log <code>isUploading</code> in my component ’s <code>componentDidUpdate()</code> method I get just one <code>isUploading false</code> when the component loads. If I add <code>console.log('assetTypes.ASSETS_SET_UPLOADING', action.payload)</code> to the reducer and trigger the <code>setUploading</code> action, that log reflects the correct result but the component never logs <code>isUploading true</code>.</p>
  
  <p>Why is that?</p>