Изменить состояние с помощью «onClick» / «onSubmit» в соответствии с нажатием кнопки

Question

Я пытаюсь определить Student или Counselor на основе нажатой кнопки.

Я пытаюсь добиться того, чтобы пользователь нажимал кнопку Counselor , isCounselor станет true, если нажата другая кнопка, тогда isStudent станет true.

Я пробовал оба onClick и onSubmit, но состояние остается прежним .

Поэтому я считаю, что сделал что-то не так, но не уверен, где. Я только начал использовать react-redux и не могу разобраться с этим!

Редуктор включен в combineReducers, и я создал типы в коде ниже:

редуктор

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;
  }
}

действие

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 },
  };
};

компонент

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;

Не могли бы вы посоветовать ? Спасибо!

Answer 1

Компонент Welcome, похоже, не подключен к состоянию избыточности, поэтому он не получает данные из хранилища, а действия не передаются в избыточности l oop.

Следующий код: не готов как есть, но должен дать вам рабочий путь

// 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)

Вы должны взглянуть на этот раздел документации и здесь о bindActionCreators

Answer 2

В вашем файле действий сделайте это ...

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

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

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

Внутри рендера передайте функцию в onClick опору Link компонента

Затем на конец вашего компонента, сделайте это ...

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

const mapDispatchToProps = { toCounselor, toStudent };

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Welcome)