调度非常简单的redux动作

Question

下午好，

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

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组件connect到redux并使用mapDispatchToProps函数mapDispatchToProps ，您mapDispatchToProps返回的函数作为道具提供给组件。 这意味着当您要分派动作时，需要在this.props.chooseTab(button)其this.props.chooseTab(button) 。