Dispatching very simple redux action

Question

Good afternoon,

I am having a very tough day trying to get this very simple redux action to work properly. All I want to do is change my state to what tab is being currently viewed- that's it! Nothing fancy. I'll show you the component, the action creator, and the 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;
      }

  };

I have tried hard coding the type to one of the action.type listeners, for example "BALLOTS". I have successfully implemented asynchronous actions using redux previous to this. I am going insane trying to get this very simple tab-selecting action to work properly and need a fresh set of eyes- because I have no idea why my reducer isn't picking this up.

Answer 1

I am assuming that you currently a error in your console that says chooseTab is not a function ?

When you connect your component to redux and use the function mapDispatchToProps , you are giving the returned functions to the component as props. This means that when you want to dispatch the action, you need to fire it a la this.props.chooseTab(button) .