Help, My first time linking Redux to React.

My state argument has been passed with value but when in the switch statement the values assigned to the state is not read at return as the original value hello but the values from the return statement after it the No value becomes the initial then ADD.

when the page loads it shows state has the value of hello, but when I send an action the value of state changes to 'No'

This is my code

const MessageReducer = (state = "hello", action) => {
alert(state);
  switch (action.type) {
    case "ADD":
      // state.;
      alert(state);
      return "ADD";
    default:
      return "No";
  }
};
export default MessageReducer;

this is my configure store:

import MessageReducer from "../reducers/messageReducer";

export const store = configureStore({
  reducer: { preview: MessageReducer },
});

my makdown.js:

import React from "react";
import { connect } from "react-redux";
import MsgCreator from "../actions/msgAction";

class Markdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: "",
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      current: event.target.value,
    });
    this.props.input(this.state.current);
  }
  render() {
    let i = this.props.messages;
    return (
      <div>
        <form>
          <label for="editor">Enter your text here: </label>
          <textarea
            id="editor"
            name="editor"
            value={this.props.current}
            onChange={this.handleChange}
          ></textarea>
        </form>
        <p id="preview">{i}</p>
      </div>
    );
  }
}

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

const mapDispatchToProps = (dispatch) => {
  return {
    input: (input) => {
      dispatch(MsgCreator(input));
    },
  };
};

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

My App.js:

import React from "react";
import Markdown from "./components/markdown";
import "./App.css";

function App(props) {
  return (
    <div className="App">
      <h1>hello world</h1>
      <Markdown />
    </div>
  );
}

export default App;