Я пытаюсь создать следующее: форум, на котором можно создать сообщение, которое запускает ADD_POST, и сообщение создается и добавляется в массив объектов «posts». Каждый объект «post» инициализируется массивом «комментариев», который будет содержать тексты комментариев («commentTxt»), введенные внутри этого сообщения.Как правильно обрабатывать состояние в двойных вложенных массивах (ReactJS + Redux)?
let postReducer = function(posts = [], action) {
switch (action.type) {
case 'ADD_POST':
return [{
id: getId(posts), //just calls a function that provides an id that increments by 1 starting from 0
comments: [
{
id: getId(posts),
commentTxt: ''
}
]
}, ...posts]
Затем, когда пользователь вводит этот пост, есть комментарий раздел, в котором пользователь может ввести текст комментария и новый объект будет добавлен (с помощью «ADD_COMMENT») в массиве «posts.comments»
case 'ADD_COMMENT':
return posts.map(function(post){
//find the right 'post' object in the 'posts' array to update the correct 'comments' array.
if(post.id === action.id){
//update 'comments' object array of a 'post' object by adding a new object that contains 'commentTxt', and replaces the current 'comments' array
return post.comments = [{
id: action.id,
//new object is made with text entered (action.commentTxt) and added to 'post.comments' array
commentTxt: action.commentTxt
}, ...post.comments]
}
})
и отобразите его. И каждый раз, когда добавляется новый комментарий, новый будет отображаться вместе с предыдущими объектами комментария в массиве. Хотел бы сделать что-то вроде следующего:
{
this.props.post.comments.map((comment) => {
return <Comment key={comment.id} comment={comment} actions={this.props.actions}/>
})
}
Я слышал мутирует состояние напрямую не рекомендуется, так что я был бы признателен за любые рекомендации или представление о том, как правильно это сделать.
В том месте, где { this.props.post.comments.map ((комментарий) => { return }) }, как бы вы изменили его на основе новой версии ADD_COMMENT и получили доступ к состоянию, возвращенному из редуктора ADD_COMMENT через mapStateToProps и mapDispatchToProps? –
Я не думаю, что любой из ваших кодов должен был бы измениться, кроме редуктора, поскольку форма данных остается нетронутой. Или, по крайней мере, я намеревался не изменять форму данных из ожидаемого. –
Я просто зациклился на том, как я должен вызвать состояние внутри mapStateToProps, чтобы иметь возможность делать такие, как «this.props.post.comments». Кроме того, где бы я мог нормализовать данные? Извините, но если вы не возражаете, не могли бы вы показать полный пример. Кажется, я не обволакиваю голову. –