Tengo este componente que muestra una lista de elementos educativos agregados por el usuario donde cada vez representa dónde estudió y por cuánto tiempo... etc.:

 class EducationItems extends Component { render() { const education = !!this.props.profile ? this.props.profile.education : []; return ( <div> {!!education && education.map((education_element_data, i) => { console.log( "🚀 ~ file: EducationItems.js ~ line 26 ~ EducationItems ~ education.map ~ i", i ); return ( <EducationItem number={i} educationElementData={education_element_data} /> ); })} </div> ); } } const mapStateToProps = (state) => ({ profile: state.profile.profile, }); const mapDispatchToProps = {}; export default connect(mapStateToProps, mapDispatchToProps)(EducationItems);

Está conectado al valor del profile en la tienda como puede ver:

 const mapStateToProps = (state) => ({ profile: state.profile.profile, });

Cuando el usuario agrega educación, obtengo la nueva lista de toda la educación que agregó y trato de actualizarla en la interfaz de usuario. Así que en el reductor tengo esto:

perfilReductor.js

 const initialState = { profile: null, }; case ADD_EDUCATION: let updated_profile_with_new_education = state.profile; updated_profile_with_new_education.education = action.payload.updated_education; return { ...state, profile: updated_profile_with_new_education, };

El problema después de que el usuario agrega una educación con éxito, el componente EducationItems no se vuelve a procesar.

Parece que no detecta el cambio en store.state.profile.education por alguna razón.

Pensé que actualizar cualquier cosa en store.state.profile lo volvería a representar, ya que está conectado a ese valor en la tienda.

¿Tienes idea de lo que está pasando?