Search code examples
javascriptreactjsreduxreact-router-redux

Uncaught Error: A state mutation was detected between dispatches


I am making a React + Redux application, and I'm getting this when clicking on a link

Uncaught Error: A state mutation was detected between dispatches, in the path `library.items.5.track.duration`. This may cause incorrect behavior. (http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments)
    at invariant (browser.js:40)
    at index.js:50
    at index.js:208
    at index.js:21
    at Object.select (bindActionCreators.js:7)
    at ListItem.handleTrackNameClick (ListItem.js:12)
    at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:70)
    at executeDispatch (EventPluginUtils.js:89)
    at Object.executeDispatchesInOrder (EventPluginUtils.js:112)
    at executeDispatchesAndRelease (EventPluginHub.js:44)

Now I get what this means, it means I have somewhere some code that is changing my state. My reducer isn't even called, the only things that get called on click are:

handleTrackNameClick() {
    this.props.select([
      deepAssign({}, this.props.track)
    ]);
  }

and select function corresponds to:

function playTracks(tracks) {
  console.log('playing');
  return {
    type: PLAY_TRACKS,
    tracks: deepAssign({}, tracks)
  };
}

and then (just after displaying playing) I immediately get the error, the reducer is never called. It's weird because I don't mutate my state anywhere in my code. I don't really know what to post else, so tell me if you need more. Here is the full source

EDIT: the playTrack function receives an argument like this:

[
   {
      "id":"8hAt8fvQomHt9ztV",
      "name":"Bounce",
      "duration":114226,
      "artist":{
         "id":"1MUjmFoDBQOk2vbO",
         "name":"System of a Down"
      },
      "album":{
         "id":"8B7MePC7rhglf7px",
         "name":"Toxicity"
      }
   }
]

and here is a sample state just before call:

{
   "routing":{
      "locationBeforeTransitions":{
         "pathname":"/app/library",
         "search":"",
         "hash":"",
         "state":null,
         "action":"POP",
         "key":"oabgr1",
         "query":{

         },
         "$searchBase":{
            "search":"",
            "searchBase":""
         }
      }
   },
   "toolbar":{
      "playing":false,
      "currentTime":0,
      "viewType":"redux-app/view-types/THUMBNAILS",
      "searchString":"",
      "volume":1
   },
   "library":{
      "items":[
         {
            "id":"mwgwHdOVamAz8wq0",
            "track":{
               "id":"mwgwHdOVamAz8wq0",
               "name":"A Hopeful Transmission",
               "duration":33000,
               "artist":{
                  "id":"tL1YNNTaOLvYmHot",
                  "name":"Coldplay"
               },
               "album":{
                  "id":"3xYmTho9gpG5g4bs",
                  "name":"Mylo Xyloto"
               }
            }
         },
         {
            "id":"NVcZ9spiBPSebv57",
            "track":{
               "id":"NVcZ9spiBPSebv57",
               "name":"X",
               "duration":118160,
               "artist":{
                  "id":"1MUjmFoDBQOk2vbO",
                  "name":"System of a Down"
               },
               "album":{
                  "id":"8B7MePC7rhglf7px",
                  "name":"Toxicity"
               }
            }
         },...
      ],
      "loading":false,
      "viewType":"LIST",
      "viewScope":"TRACKS"
   },
   "sidebar":{
      "libraries":[
         {
            "_id":"GaejiodsIlFRteGW",
            "name":"Test",
            "path":"/home/vinz243/.cassette/downloads"
         }
      ]
   },
   "store":{
      "query":"",
      "results":{
         "albums":[

         ],
         "tracks":[

         ]
      },
      "releases":[

      ]
   }
}

Solution

  • After commmenting uncommenting big chunks of code to try to find where it was coming from, it appeared my API was returning some values that would cause a NaN value for duration, and multiplying by 1000 caused this issue