Change state using "onClick"/"onSubmit" according to button click

Question

I am trying to identify a Student or a Counselor based on the button that is clicked.

What I am trying to achieve is that, if the user clicks on the Counselor button, isCounselor will become true, if the other button is clicked, then isStudent will become true.

I have tried both onClick and onSubmit but the state remains the same.

Therefore, I believe I have done something wrong but not sure where. I have just started using react-redux and cannot get my head around it!

The reducer is included in the combineReducers and I have created the types in the code below:

reducer

import { IS_COUNSELOR, IS_STUDENT } from "../actions/types";

const initialState = {
  isCounselor: false,
  isStudent: false,
};

export default function (state = initialState, action) {
  switch (action.type) {
    case IS_COUNSELOR:
      return {
        ...state,
        isCounselor: true,
        isStudent: false,
      };
    case IS_STUDENT:
      return {
        ...state,
        isCounselor: false,
        isStudent: true,
      };
    default:
      return state;
  }
}

action

import { IS_COUNSELOR, IS_STUDENT } from "./types";

// IS COUNSELOR
export const toCounselor = () => {
  return {
    type: IS_COUNSELOR,
    payload: { isCounselor, isStudent },
  };
};

// IS STUDENT
export const toStudent = () => {
  return {
    type: IS_STUDENT,
    payload: { isCounselor, isStudent },
  };
};

component

import React, { Component } from "react";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import { toCounselor, toStudent } from "../../actions/clients";

export class Welcome extends Component {
  static propTypes = {
    isCounselor: PropTypes.bool,
    isStudent: PropTypes.bool,
    toCounselor: PropTypes.func.isRequired,
    toStudent: PropTypes.func.isRequired,
  };

  onSubmitCounselor = (e) => {
    e.preventDefault();
    this.props.toCounselor();
  };

  onSubmitStudent = (e) => {
    e.preventDefault();
    this.props.toStudent();
  };

  render() {
    return (
            {/* some divs */}
                <div className="col-md-6 mt-3">
                  <Link to="/register" className="nav-link">
                    <button
                      type="submit"
                      className="btn btn-success"
                      // name="isStudent"
                      onSubmit={this.onSubmitStudent}
                    >
                      I am a Student
                    </button>
                  </Link>
                </div>
                <div className="col-md-6 mt-3">
                  <Link to="/register" className="nav-link">
                    <button
                      type="submit"
                      className="btn btn-info"
                      // name="isCounselor"
                      onSubmit={this.onSubmitCounselor}
                    >
                      I am a Counselor
                    </button>
                  </Link>
                </div>
            {/* some other divs */}
    );
  }
}

export default Welcome;

Could you please advise? Thank you!

Answer 1

Your Welcome component does not seem to be connected to the redux state, thus it is not receiving data from the store and the actions are not dispatched in the redux loop.

The following code is not ready as is but should give you a working path

// Connect the Redux Store (state) to the component props
const mapStateToProps = (state) => ({
  isCounselor: state.isCounselor,
  isStudent: state.isStudent,
});

// Updated thanks to the comment of Drew Reese below
const mapDispatchToProps = { toCounselor, toStudent };

// Previous version
// const mapDispatchToProps = dispatch => bindActionCreators({ toCounselor, toStudent }, dispatch);

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Welcome)

You should have a look at this section of the documentation and here about the bindActionCreators

Answer 2

In your action file, do this...

import { IS_COUNSELOR, IS_STUDENT } from "./types";

// IS COUNSELOR
export const toCounselor = () => ({ type: IS_COUNSELOR });

// IS STUDENT
export const toStudent = () => ({ type: IS_STUDENT });

Inside the render, pass the function to the onClick prop of the Link component

Then at the end of your component, do this...

const mapStateToProps = (state) => ({
  isCounselor: state.isCounselor,
  isStudent: state. isStudent,
});

const mapDispatchToProps = { toCounselor, toStudent };

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Welcome)