Disconnection between action dispatch and reducer

Question

What seems to be an issue is when this.state is called in handleOnSubmit, it does return the desired input.

However, once this.state is used as an argument in this.props.addPhone(this.state), it returns {type: "CREATE_PHONE", phone: undefined}.

The code I belive is relevant to my question, starting from an action:

addPhone action:

export const addPhone = phone => {
  return {
    type: 'CREATE_PHONE',
    phone
  }
}

Phone Reducer(action is undefined here):

const phoneReducer = (state = {phones: [], loading: false}, action) => {
    switch (action.type) {
        case 'CREATE_PHONE':
            
            const phone = {
                id: uuid(),
                make: action.make,
                model: action.model,
                price: action.price
            }
           return {...state, phones: [...state.phones, phone]}
        default:
            return state;
    }
}
export default phoneReducer

And now, the Phone form:

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { fetchPhones } from '../actions/phoneActions';
import { addPhone } from '../actions/phoneActions';
import PhoneList from './PhoneList';
class App extends Component {  
  state = {
    make: '',
    model: '',
    price: 0
  }

  handleOnChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
    
  }

  handleOnSubmit = event => {
    event.preventDefault();
    this.props.addPhone(this.state)
    this.setState({
      make: '',
      model: '',
      price: 0
    });
    
  }
  
  componentDidMount() {
    this.props.fetchPhones()
  }
  render() {
    return (
      <div>
        <h2>WELCOME TO OUR STORE</h2>
      <div>
        <h4>ADD A NEW PHONE</h4>
        <div>
        <form onSubmit={this.handleOnSubmit} >
          <input
            name="make"
            type="text"
            value={this.state.make}
            onChange={this.handleOnChange} /><br/>
            <input
            name="model"
            type="text"
            value={this.state.model}
            onChange={this.handleOnChange} /><br/>
            <input
            name="price"
            type="number"
            value={this.state.price}
            onChange={this.handleOnChange} /><br/><br/>
          <input type="submit" />
        </form>
      </div>
      </div>
      <div>
        <h4>CLICK HERE TO REMOVE PHONES</h4>
        <button> click here </button>
      </div>
      <div id="showPhones">
        
        <h4>SEE BELOW OUR PHONE OFFER</h4>
        
        <PhoneList phones={this.props.phones} loading={this.props.loading}/>
      </div>
      </div>
    );
  }
} 
const mapStateToProps = (state) => {
   
  return {
    phones: state.phones,
    loading: state.loading
  }
}
const dispatchToProps = (dispatch) => {
  return {
    addPhone: () => dispatch(addPhone()),
    fetchPhones: () => dispatch(fetchPhones())
    
  }
}

export default connect (mapStateToProps, dispatchToProps)(App)

What seems to be a mistake so this.props.addPhone(this.state) is returning: {type: "CREATE_PHONE", phone: undefined}?

I really do apologize if the question lacks professional code writing, but I am just a beginner in coding and on starckoverflow.

Answer 1

Before I dig in, i noticed,

addPhone: () => dispatch(addPhone()),

you need to at least pass the phone in this call, ex.

addPhone: phone => dispatch(addPhone(phone))

How does the dispatch know what to add :)