Не сохраняется новый объект в массиве state.messages в reducer'e?

Question

[chatterbox777]

Проблема в том, что после отправки диспатча ADD_MESSAGE , в state не сохраняется новая версия state с добавленным новым объектом { id: Math.random() * 10, text: action.value }, то есть он появляется на секунду и исчезает, как будто бы после ререндера стейт перезаписывается на initialState, почему так происходит, не могу понять(

App.js

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import "./App.css";
import Navbar from "./Components/Navbar";
import Profile from "./Components/Profile/Profile";
import classTags from "../src/App.module.css";
import { connect } from "react-redux";

class App extends React.Component {
  // increment = () => {
  //   this.setState({
  //     ...this.state,
  //     count: this.state.count + 1
  //   });
  // };
  // decrement = () => {
  //   this.setState({
  //     ...this.state,
  //     count: this.state.count - 1
  //   });
  // };

  render() {
    return (
      <BrowserRouter>
        <div className={classTags.display}>
          <Navbar />
          <Route path="/Profile" render={() => <Profile />} />
          <Route
            path="/Counter"
            render={() => (
              <Form
                counter={this.props.count}
                increment={this.props.increment}
                decrement={this.props.decrement}
                history={this.props.history}
                onDeleteItem={this.props.onDeleteItem}
              />
            )}
          />
          <Route
            path="/Chat"
            render={() => (
              <Chat
                addMessage={this.props.addMessage}
                messages={this.props.messages}
              />
            )}
          />
        </div>
      </BrowserRouter>
    );
  }
}

class Form extends React.Component {
  render() {
    return (
      <div>
        <div className="form">{this.props.counter}</div>
        <button onClick={this.props.increment}>+</button>
        <button onClick={this.props.decrement}>-</button>

        <div>History</div>
        <div>
          <ul>
            {this.props.history.map(el => (
              <li key={el.id} onClick={() => this.props.onDeleteItem(el.id)}>
                {el.count}
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}

class Chat extends React.Component {
  render() {
    return (
      <div className={classTags.disp}>
        <div className={classTags.window}>
          <ul>
            {this.props.messages.map(item => (
              <li key={item.id}>{item.text}</li>
            ))}
          </ul>
        </div>
        <form onSubmit={() => this.props.addMessage()}>
          <input
            className={classTags.inputText}
            type="text"
            placeholder="Введите сообщение"
          />
          <button>Отправить</button>
        </form>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    count: state.count,
    history: state.history,
    messages: state.messages
  };
};

const mapDispatchToProps = dispatch => {
  return {
    increment: () => dispatch({ type: "INCREMENT", value: 1 }),
    decrement: () => dispatch({ type: "DECREMENT", value: 1 }),
    onDeleteItem: id => dispatch({ type: "DELETE_ITEM", key: id }),
    addMessage: () => dispatch({ type: "ADD_MESSAGE", value: "HAHAHA" })
  };
};

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

reducer.js

const initialState = {
  count: 0,
  history: [],
  messages: [
    { id: 1, text: "Привет всем" },
    { id: 2, text: "Всем пока)" }
  ]
};

const reducer = (state = initialState, action) => {
  const newState = { ...state };

  switch (action.type) {
    case "INCREMENT":
      return {
        ...state,
        count: state.count + action.value,
        history: state.history.concat({
          id: Math.random(),
          count: state.count + action.value
        })
      };
    case "DECREMENT":
      return {
        ...state,
        count: state.count - action.value,
        history: state.history.concat({
          id: Math.random(),
          count: state.count - action.value
        })
      };

    case "DELETE_ITEM":
      return {
        ...state,
        history: state.history.filter(item => item.id !== action.key)
      };

    case "ADD_MESSAGE":
      return {
        ...state,
        messages: [
          ...state.messages,
          { id: Math.random() * 10, text: action.value }
        ]
      };

    default:
      return newState;
  }
};

export default reducer;

Comments

[paoluccio]

Попробуйте так:

class Chat extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.addMessage();
  }

  render() {
    return (
      <div className={classTags.disp}>
        ...
        <form onSubmit={this.handleSubmit}>
          ...
        </form>
      </div>
    );
  }
}

[chatterbox777]

paoluccio, неа, пишет props undefined в месте this.props.addMessage();

[paoluccio]

chatterbox777, согласен. Поправил код.

[chatterbox777]

paoluccio, Получилось...., Спасибо!!!! а в чем смысл то?))

[paoluccio]

chatterbox777, проблема была в этой строке <form onSubmit={() => this.props.addMessage()}.
Браузер, по умолчанию, перезагружает страничку после сабмита формы. Именно по этой причине, как вы заметили, продолжительность жизни вашего редакс стэйта составляла не более секунды. То есть, после каждой перезагрузки, стэйт принимал начальные значения. Чтобы решить эту проблему, необходимо отловить событие сабмита и, как говорится, его запревентдефолтить)
e.preventDefault() - блокирует дефолтное поведение браузера и препятствует обновлению страницы.