react-Redux using logger Cannot read property 'payload' of undefined

Question

I'm a beginner in Redux. I'm trying to GET a selected value of radio button, but when I used the logger in reducer function it is showing payload: undefined.

when I click on radio button, logger not giving the desired display output.

React Component:

import React, { Component } from "react";
import { connect } from "react-redux";
import { milk } from "../redux";
import AddToOrder from "./addToOrder";

class MilkType extends Component {
  constructor() {
    super();
    this.state = {
      value: "",
    };
  }
  updateValue = (e) => {
    const val = e.target.value;
    this.setState({
      value: this.updateValue,
    });
    const milk_data = { val: "" };
    console.log("Milk Type is:", val);
  };
  render() {
    const price1 = 40;
    const price2 = 50;
    const price3 = 10;
    const price4 = 30;

    return (
      <div className="height">
        <h3>Milk</h3>
        <div
          onChange={this.updateValue}
          onClick={() => {
            this.props.milk(this.state.milk_data);
          }}
        >
          <ul className="list">
            <li>
              <input
                id="1"
                type="radio"
                name="milk"
                value="Non-Fat Milk"
                className="margin"
              />
              Non-Fat Milk <span>( Rs.{price1})</span>
            </li>
            <li>
              <input
                type="radio"
                name="milk"
                value="Skim Milk"
                className="margin"
              />
              Skim Milk <span>( Rs.{price2})</span>
            </li>
            <li>
              <input
                type="radio"
                name="milk"
                value="Whole Milk"
                className="margin"
              />
              Whole Milk <span>( Rs.{price3})</span>
            </li>
            <li>
              <input
                type="radio"
                name="milk"
                value="Full Cream Milk"
                className="margin"
              />
              Full Cream Milk <span>( Rs.{price4})</span>
            </li>
          </ul>
        </div>
        {/* <AddToOrder data="Click here" onUpdateValue={this.updateValue} /> */}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    value: state.ingredient.value,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    milk: (milk_data) => {
      dispatch(milk(milk_data));
    },
  };
};

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

Action File:

import { ActionTypes } from "./ingredientTypes";

export const milk = (milk_data) => {
  return {
    type: ActionTypes.MILK_TYPE,
    payload: milk_data,
  };
};

Reducer File

import { ActionTypes } from "./ingredientTypes";

const initialState = {
  milk_data: "",
};

const ingredientReducer = (state = initialState, action) => {
  switch (action.type) {
    case ActionTypes.MILK_TYPE:
      return {
        ...state,
        milk_data: action.payload,
      };
        default:
      return state;
  }
};

export default ingredientReducer;

when I click on radio button it should return a selected value and not payload undefined.