action dispatch 和 reducer 脱节

Question

问题似乎是在 handleOnSubmit 中调用 this.state 时，它会 return 所需的输入。

然而，一旦 this.state 被用作 this.props.addPhone(this.state) 中的参数，它 returns {type: "CREATE_PHONE", phone: undefined}.

我认为代码与我的问题相关，从一个动作开始：

addPhone 动作：

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

Phone减速器（这里的动作是undefined）：

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

现在，Phone 形式：

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)

似乎是一个错误所以 this.props.addPhone(this.state) 是 returning: {type: "CREATE_PHONE", phone: undefined}?

如果问题缺乏专业的代码编写，我真的很抱歉，但我只是编码和 starckoverflow 上的初学者。

Answer 1

在我深入研究之前，我注意到，

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

你至少需要在这个调用中传递 phone，例如

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

调度怎么知道要添加什么:)

action dispatch 和 reducer 脱节

Disconnection between action dispatch and reducer

reactjs

redux

redux-thunk

react-redux