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组件要还原并使用函数mapDispatchToProps时，您将返回的函数作为props提供给组件。这意味着当您要调度操作时，需要将其激活为this.props.chooseTab(button)。

调度非常简单的redux动作

1 个答案: