Состояние обновляется, но компонент не перерисовывается

Question

Я создаю простое приложение для чата с реактивной реакцией. Мне удалось отобразить некоторые фиктивные данные из моего избыточного состояния в моем компоненте сообщения. Мне удалось отправить новое «сообщение» в состояние избыточности из моего компонента «Отправить». Но новый элемент не отображается в компоненте Message.

Итак, я попытался консоль журнала предыдущего состояния и нового состояния из messageReducer, и, похоже, он работает. Я получаю массив состояний со всеми фиктивными данными + новый отправленный объект.

Вот репозиторий Github, если необходимо: https://github.com/MichalK98/Chat.V.2

// Компонент сообщения

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Message extends Component {
    render() {
        return (
            <ul id="chatroom">
                {this.props.messages.map((msg) => (
                    <li className={(msg.username == 'You' ? "chat-me" : "")} key={msg.id}>
                        <p>{msg.message}</p>
                        <small>{msg.username}</small>
                    </li>
                )).reverse()}
            </ul>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        messages: state.message.messages
    }
}

export default connect(mapStateToProps)(Message);

// Отправить компонент

...
import { connect } from 'react-redux';
...

class Submit extends Component {

    state = {
        message: []
    }

    clear = async () => {
        await this.setState({
            message: ''
        });
    }

    handleChange = async (e) => {
        await this.setState({
            message: e.target.value
        });
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.writeMessage(this.state.message);
        this.clear();
    }

    render() {
        return (
            <div className="chat-footer">
                <form onSubmit={this.handleSubmit} autoComplete="off">
                    <input  onChange={this.handleChange} value={this.state.message} type="text" placeholder="Skriv något..."/>
                    <button id="btnSend"><SendSvg/></button>
                </form>
            </div>
        )
    }
}

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

const mapDispatchToProps = (dispatch) => {
    return {
        writeMessage: (message) => { dispatch({type: 'WRITE_MESSAGE', messages: {id: Math.random(), username: 'You', message: message}})}
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Submit);

// messageReducer

const initState = {
    messages: [
        {id: 1, username: 'You', message: 'Hi, data from reducer!'},
        {id: 2, username: 'Mattias', message: 'Wow..'},
        {id: 3, username: 'Alien', message: 'Awesome!'}
    ]
}

const messageReducer = (state = initState, action) => {
    if (action.type === 'WRITE_MESSAGE') {
        state.messages.push(action.messages);
        console.log('Action ',action.messages);
        console.log('State ',state.messages);
    }
    return state;
}

export default messageReducer;

Я ожидаю, что новые данные будут отображаться в моем компоненте Message, когда я добавлю новый объект в массив состояний вmessageReducer.

Answer 1

Прежде всего в вашем Компоненте сообщений вы должны изменить mapStateToProps:

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

А затем в вашем редукторе сообщений вы должны изменить редуктор. это лучший способ для редуктора. Вы не должны напрямую изменять состояние:

const messageReducer = (state = initState, action) => {
    switch (action.type) {
        case "WRITE_MESSAGE":
            return { ...state, messages: [...state.messages, { ...action.messages }] }
        default:
            return state;
    }
}

, если вам нужна помощь, я могу помочь вам завершить ваш проект: -)