Redux reducer - modifying array with forEach

Question

Have a small problem with fetching and based on response updating an array inside my state in Redux.

First I have done the whole array update with forEach in actions (based on my initial state object) and sent it ready to reducer, it worked. Simple.

But then read tutorials that modifying should be done only in the reducer, and that action should only deal with getting the response. So I have tried doing it this way, two ways, both failed.

The payload i have dispatched to reducer in both cases was just the ready response i have got.

Can someone please enlighten me what went wrong and what's the correct way to do this in reducer?

Both approaches didn't work:

export const handleMusicCards = (state = musicState, action = {}) => { switch (action.type) {

case REQUEST_MUSIC_SUCCESS:
  return Object.assign({}, state, {
    musicStateItemList: state.musicStateItemList
      .forEach((el, i) => {
        el.track = action.payload.message.body.track_list[i].track.track_name;
        el.album = action.payload.body.track_list[i].track.album_name;
        el.artist = action.payload.body.track_list[i].track.artist_name;
        el.id = action.payload.body.track_list[i].track.track_id;
        el.favClicked = false;
        el.addedToFav = false;
      }),
    isLoading: false
  });

} }

export const handleMusicCards = (state = musicState, action = {}) => { switch (action.type) {

case REQUEST_MUSIC_SUCCESS:
  return Object.assign({}, state, {
    musicStateItemList: state.musicStateItemList
      .forEach((el, i) => {
        return {
          ...el,
          track: action.payload.message.body.track_list[i].track.track_name,
          album: action.payload.message.body.track_list[i].track.album_name,
          artist: action.payload.message.body.track_list[i].track.artist_name,
          id: action.payload.message.body.track_list[i].track.track_id,
          favClicked: false,
          addedToFav: false,
        }
      }),
    isLoading: false
  });

} }

Array.prototype.forEach does not return anything to the caller, are you sure you don't mean to use Array.prototype.map instead? — Danny Delott
– Danny Delott, Commented May 7, 2019 at 22:57
Yes, apologies, in the 2nd example should have been map. Still doesn't work, this time with error 'Cannot read property 'body' of undefined' which is odd. — SuavekN
– SuavekN, Commented May 7, 2019 at 23:06

Taylor Burke · Accepted Answer · 2019-05-07 23:04:46Z

2

I am not sure after reading it where the failure is occurring. A little more about redux conventions.

The action objects are only to describe what changes should be made to the state. The reducer is where the state should actually be changed. In redux, you never want to modify the state object, instead you want to copy it and return a new object with the changes, as described by the action objects.

So you might have a reducer case that looks something like this...

const reducer = (state, action) => {
    switch (action.type) {
        case NEW_RECORD_SUBMIT :
            return {
                ...state,
                newRecordStatus: action.status,
            };
    default :
          return state;
  }
};

answered May 7, 2019 at 23:04

Taylor Burke

4445 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SuavekN · Accepted Answer · 2019-05-07 23:22:26Z

1

It's solved now. Very silly mistake, wrong case in switch statement...Went for the second option I tried, with map()

answered May 7, 2019 at 23:22

SuavekN

1012 silver badges9 bronze badges

Collectives™ on Stack Overflow

Redux reducer - modifying array with forEach

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related