调用映射动作时出现类型错误 - 将动作映射到 props react/redux

Question

我正在尝试将一个动作映射到道具但是我得到一个错误： TypeError: _this2.props.updateUsername 不是函数

如何成功地将 redux 动作映射到 props 并成功调用函数？我没有看到在任何其他 stackoverflow 问题/答案中弹出此错误，这是一个简单的错误吗？会不会是 .index 或 .app 中的 redux 设置错误？

我尝试过： - 不使用默认导出导入 - 具有不同格式的 mapDispatchToProps（例如，不使用 bindactioncreators） - 修正错别字

• 组件：

  import { updateUsername } from "../../actions/user-actions";
  import React, { Component } from "react";
  import { InputText } from "primereact/inputtext";
  import { Button } from "primereact/button";
  import { Password } from "primereact/password";
  import "./UserLogin.css";
  import { connect } from "react-redux";
  import { bindActionCreators } from 'redux'
  
  export class UserLoginPage extends Component {
    constructor(props) {
      super(props);
      this.state = { //used to be using states so ill leave these here for now
        username: "", 
        password: "",
        renderTryAgain: false
      };
  
      this.checkLoginDetails.bind(this.checkLoginDetails);
    }
  
    async checkLoginDetails() {
      ...
    }
  
    render() {
      const usernameBox = (
        <InputText
          ...
          value={this.props.username}
          onChange={e => this.props.updateUsername(e.target.value)}
        />
      );
  
      const passwordBox = (
        <Password
          ...
        />
      );
  
      const loginButton = (
        <Button
          ...
        />
      );
  
      return (
        <header className="User-login">
          <p>Dashboard User Login</p>
          <div className="p-grid">
            <div className="p-col">{usernameBox}</div>
            <div className="p-col">{passwordBox}</div>
            <div className="p-col">{loginButton}</div>
          </div>
        </header>
      );
    }
  }
  
  const mapStateToProps = state => ({
    username: state.username
  });
  
  const mapDispatchToProps = dispatch => bindActionCreators(
    {
      updateUsername,
    },
    dispatch,
  )
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(UserLoginPage);
  

减速器：

import { UPDATE_USERNAME} from '../actions/user-actions'

export function passReducer(state = "", {type, payload}) {
  switch (type) {
    case true:
      return payload
    default:
      return state
  }
}

export function usernameReducer(state = '', {type, payload}) {
  switch (type) {
    case UPDATE_USERNAME:
      return payload.username
    default:
      return state
  }
}

export default { passReducer, usernameReducer };

• 行动：

  export const UPDATE_USERNAME = 'username:updateUsername'
  export function updateUsername(newUsername){
      return {
          type: UPDATE_USERNAME,
          payload: {
              username: newUsername
          }
      }
  }
  
  export default {UPDATE_USERNAME, updateUsername}
  

非常感谢

Answer 1

你可以在更新你的构造函数后检查一次吗？

constructor(props) {
    super(props);
    //...
  }

Answer 2

不要使用 mapDispatchToProps。相反，只需将您想要映射的所有操作包装在一个对象中，并将它们作为第二个参数传递给 connect 辅助方法。

点赞connect(mapStateToProps, { updateUsername })(UserLoginPage)

希望这会有所帮助！