Замена объекта в массиве без изменения состояния в Redux

Question

Я пытаюсь отредактировать объект и заменить его в массиве, используя React и Redux следующим образом:

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

массив 'Languages' выглядит как находящийся до оператора return, но состояние не перерисовывается.Я думаю, что я как-то мутирую.Другие действия (удалить, получить, установить) работают нормально.Любые советы?

РЕДАКТИРОВАТЬ.Это релевантная часть компонента, которая должна отображать

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

);

Answer 1

Вам нужно создать новую ссылку на массив, проще всего просто использовать map, вот так:

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