调度非常简单的 redux action

Question

下午好，

我度过了非常艰难的一天，试图让这个非常简单的 redux 操作正常工作。我要做的就是将我的状态更改为当前正在查看的选项卡 - 就是这样！没有什么花哨。我将向您展示组件、动作创建器和减速器：

StudentDash.js:

import React from "react";
import {connect} from "react-redux";

import { chooseTab } from "../../actions/dashActions";

const StudentDash = React.createClass({

  handleTabChange(button){
    chooseTab(button);
  },

  render(){
    return(

        <div className="dashContainer">
          <div className="nav">
            <div id="userInfo">
              Hello {this.props.user.username}
            </div>
            <div id="navButtons">
              <button  onClick={() => this.handleTabChange("profile")}>Profile</button>
              <button  onClick={() => this.handleTabChange("caleander")}>Caleander</button>
              <button  onClick={() => this.handleTabChange("ballots")}>Ballot Entry</button>
            </div>
          </div>
          <div className="navFocus"></div>
        </div>

      )
  }

});

const mapStateToProps = (state) => {
  return{
    user: state.user,
    activeTab: state.activeTab
  }
};
const mapDispatchToProps =  {
  chooseTab
};

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

dashActions.js:

export function chooseTab(tab){

  console.log(tab.toUpperCase());

  return {
    type: tab.toUpperCase()
  }
}

dashReducer.js

export function activeTab(state={}, action){


      switch(action.type){

          case "PROFILE":
            console.log("profile");
            return state;

          case "CALEANDER":
            console.log("CALEANDER");
            return state;
          case "BALLOTS":
            console.log("BALLOTS");
            return state;
          default:
            return state;
      }

  };

我尝试将type 硬编码为action.type 侦听器之一，例如“BALLOTS”。在此之前，我已经使用 redux 成功实现了异步操作。我要疯了，试图让这个非常简单的选项卡选择动作正常工作，需要一双新的眼睛——因为我不知道为什么我的减速器不接受这个。

Answer 1

我假设您当前在控制台中显示chooseTab is not a function 的错误？

当你 connect 你的组件到 redux 并使用函数 mapDispatchToProps 时，你将返回的函数作为道具提供给组件。这意味着当您想要调度操作时，您需要像this.props.chooseTab(button) 一样触发它。