Replacing object in an array without state mutation in Redux

Question

I'm trying to edit an object and replace it in array using React and Redux like this:

case EDIT_LANGUAGE:
  let languages = [...state.languageSkills];
  languages[languages.findIndex(el => el.id === action.payload.id)] = action.payload;
  return {
    ...state,
    languageSkills: languages
  };

'languages' array looks find before return statement, but state is not re-rendered. I guess I'm mutating state somehow. Other actions (delete, get, set) are working fine. Any tips?

EDIT. This is relevant part of the component that should render

import { setLanguages, getLanguages } from '../../actions';
import {connect} from 'react-redux';
import {bindActionCreators} from "redux"
import React, { Component } from 'react';

class UserProfile extends Component {
  constructor(props) {
    super(props);
  }

  render() {   
    const languageSkillItems = this.props.languageSkills.map((languageSkill) => {
      return (
        <LanguageSkillItem key={languageSkill.id} item={languageSkill} />
      )
    });

    return (
        <div className="profile">            
            <Language languageSkillItems={languageSkillItems} />            
        </div>
    )
    } 
}

const mapStateToProps = (state) => {
  return {
    languageSkills: state.languageSkills
  };
};


const mapDispatchToProps = dispatch => {
  return {
    ...bindActionCreators({ setLanguages, getLanguages }, dispatch)
  }
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UserProfile

);

dashton answer is correct. A basic rule to follow is to avoid mutation in redux => Never mutate the state — Olivier Boissé
– Olivier Boissé, Commented Sep 11, 2018 at 21:37
I take it render is being triggered? what does <Language /> look like? — dashton
– dashton, Commented Sep 12, 2018 at 10:16
Render was actually not triggered. I've to some refactoring tomorrow, the whole design is pretty... not so good. — JohnP
– JohnP, Commented Sep 12, 2018 at 17:15

dashton · Accepted Answer · 2018-09-11 20:48:45Z

3

You need to create a new array reference, easiest way is just to use map, like so:

case EDIT_LANGUAGE:
  const languageSkills = state.languageSkills.map(el => {
    if(el.id === action.payload.id) {
        return action.payload;
    }
    return el;
  });
  return {
    ...state,
    languageSkills
  };

answered Sep 11, 2018 at 20:48

dashton

2,7341 gold badge18 silver badges16 bronze badges

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

3 Comments

JohnP Over a year ago

Thanks, I didn't know that I also need a new array reference. Unfortunately re-rendering is still not working...

dashton Over a year ago

OK, you need to post your code (preferably runnable), it could be many other things. e.g. your react-redux connect logic may not be behaving as you expect because of nesting etc etc.

JohnP Over a year ago

I accept this as an answer. My core problem was elsewhere, but answering to your questions lead me to right direction. The application had deeply nested components and one used state which was set in constructor. Thank you.

Collectives™ on Stack Overflow

Replacing object in an array without state mutation in Redux

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related