How to change button state and dispatch action to redux?

Question

I have an event listener listening for click events and am running this function:

  handleClick = e => {
    const neutralState =
      "slds-button slds-button_neutral slds-m-around_xx-small";
    const selectedState =
      "slds-button slds-button_brand slds-m-around_xx-small";
    const target = e.currentTarget;
    const targetClass = target.getAttribute("class");
    const value = target.innerHTML;

    if (targetClass === neutralState) {
      target.setAttribute("class", selectedState);
      this.saveData(value, this.props.modifier);
    } else if (targetClass === selectedState) {
      target.setAttribute("class", neutralState);
      this.removeData(value, this.props.modifier);
    }
  };

  saveData(value, modifier) {
    if (modifier === "kinds of loss") {
      this.props.dispatch(addKindsOfLoss(value));
    } else if (modifier === "type of loss") {
      this.props.dispatch(addTypeOfLoss(value));
    } else if (modifier === "water loss") {
      this.props.dispatch(addWaterLoss(value));
    }
  }

  removeData(value, modifier) {
    if (modifier === "kinds of loss") {
      this.props.dispatch(removeKindsOfLoss(value));
    } else if (modifier === "type of loss") {
      this.props.dispatch(removeTypeOfLoss(value));
    } else if (modifier === "water loss") {
      this.props.dispatch(removeWaterLoss(value));
    }
  }

The saveData and removeData actions basically add items or remove items from an array.

So in my handleClick function, if I comment out the functions for this.saveData and this.removeData the buttons change as expected. But if the saveData and removeData functions are in place, the change does not happen. It basically stays at the neutral state for the button.

Does anyone see what I am doing wrong or have any suggestion on how to be able to change the button state and fire the action?

Answer 1

I wrote a small program with your code segment. It is working as you expected. It changes the class in the button as you expected.

const root = document.getElementById("root");

class App extends React.Component {
   constructor(props) {
       super(props);
   }

  handleClick = e => {
    const neutralState =
      "slds-button slds-button_neutral slds-m-around_xx-small";
    const selectedState =
      "slds-button slds-button_brand slds-m-around_xx-small";
    const target = e.currentTarget;
    const targetClass = target.getAttribute("class");
    const value = target.innerHTML;

    if (targetClass === neutralState) {
      target.setAttribute("class", selectedState);
      this.saveData(value, this.props.modifier);
    } else if (targetClass === selectedState) {
      target.setAttribute("class", neutralState);
      this.removeData(value, this.props.modifier);
    }
  };

  saveData(value, modifier) {
    if (modifier === "kinds of loss") {
      this.props.dispatch(addKindsOfLoss(value));
    } else if (modifier === "type of loss") {
      this.props.dispatch(addTypeOfLoss(value));
    } else if (modifier === "water loss") {
      this.props.dispatch(addWaterLoss(value));
    }
  }

  removeData(value, modifier) {
    if (modifier === "kinds of loss") {
      this.props.dispatch(removeKindsOfLoss(value));
    } else if (modifier === "type of loss") {
      this.props.dispatch(removeTypeOfLoss(value));
    } else if (modifier === "water loss") {
      this.props.dispatch(removeWaterLoss(value));
    }
  }

   render() {
       return(
           <div>
               <input type="button" value="button" class="slds-button slds-button_neutral slds-m-around_xx-small" onClick={this.handleClick} />
           </div>
       );
   }
}

ReactDOM.render(<App />, root); 

I am not sure any issues with the special methods addKindsOfLoss, removeKindsOfLoss etc. but the on click action is triggered.