Why is my component not updated after using map? - reactjs

Question

I used a map in the data structure, but the components will not update when my data is updated. Why is this?
I use console.log to output 5 pieces of data, but there are only 3 pieces of data on the page, which will not be updated!!!
Component
import React, {ChangeEventHandler, Component} from "react";
import {connect} from 'react-redux';
import {RootState} from "typesafe-actions";
import {getMessage} from "./store/selectors";
import {submitComment} from './store/actions'
const mapDispatchToProps = {
submit: submitComment
};
const mapStateToProps = (state: RootState) => {
return {
article: getMessage(state.article, 1)
}
}
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps;
type State = {
value: string
}
class Todo extends Component<Props, State> {
readonly state = {value: ''}
public render() {
return (
<div>
<h1>{this.props.article?.title}</h1>
{this.props.article?.comments.map((comment) => <li key={comment.title}>{comment.title}</li>)}
<input type="text" onChange={this.onChange}/>
<button onClick={this.handleSubmit}>submit</button>
</div>
)
}
private handleSubmit = () => {
this.props.submit(this.state.value);
}
private onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
this.setState({value: e.currentTarget.value});
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Todo);
reducer.ts
import {createReducer, PayloadAction} from "typesafe-actions";
import * as actions from './actions';
interface Comment {
title: string
}
interface Article {
title: string
comments: Comment[]
}
interface App {
articles: Map<number, Article>
}
const initState: App = {
articles: new Map<number, Article>([
[1, {title: 'article', comments: [{title: 'comment-1'}, {title: 'comment-2'}]}]
])
}
export const articleReducer = createReducer<App>(initState)
.handleAction(actions.submitComment, (state: App, action: PayloadAction<string, string>) => {
const article = state.articles.get(1)
article?.comments.push({title: action.payload})
console.log(article?.comments);
return {
articles: state.articles
}
});
export default articleReducer;
export type ArticleState = ReturnType<typeof articleReducer>;
actions.ts
import {createAction} from "typesafe-actions";
export const submitComment = createAction("SUBMIT_COMMENT", (title: string) => (title))();

Answer 1

Your articleReduce is modifying an existing state value comments instead of creating a copy in an immutable way:
export const articleReducer = createReducer<App>(initState)
.handleAction(actions.submitComment, (state: App, action: PayloadAction<string, string>) => {
return {
articles: state.articles.map((article, idx) => idx !== 1 ? article : { ...article, comments: [...article.comments, action.payload] })
}
});
If you want to use mutable logic (like .push) in reducers, please see redux toolkit which is the official recommendation to write redux (and works very well with TypeScript) anyways.

Answer 2

you use 'readonly' modifier in
readonly state = {value: ''}
it meaning that 'state' cannot be reassigned