Redux toggle a text value onClick

Redux toggle a text value onClick
0.0 0

#1

After getting the basics of React down I’m now trying to figure out Redux by doing. I got a simple click on the word and have it change app up and running, but I’m having trouble figuring out how to get it to change back on another click. Since I’m not flagging a boolean I can’t do the value: !value trick, so I’m not sure where to go from here.

This is what I have so far that’s in a working state:

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { connect } from 'react-redux';

import "./styles.css";

const switcheroo = () => {
  return {
    type: 'SWITCH',
    value: 'Goodbye'
  };
};

const switchReducer = (state = {value: 'Hello'}, action) => {
  switch (action.type) {
    case 'SWITCH':
      return { ...state, value: 'Goodbye' };

    default:
      return state;
  }
}

class ClickMachine extends React.Component {
  render() {
    const { value, switcheroo } = this.props;
    return(
      <div>
        <p onClick={switcheroo}>{value}</p>
      </div>
    )
  }
};

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

const mapDispatchToProps = (dispatch) => ({
  switcheroo: () => dispatch(switcheroo()),
});

ClickMachine = connect(mapStateToProps, mapDispatchToProps)(ClickMachine);


const store = createStore(switchReducer);

class AppWrapper extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <ClickMachine />
      </Provider>
    );
  };
};

const rootElement = document.getElementById("root");
render(<AppWrapper />, rootElement);

Any guidance would be greatly appreciated. Here is the link to the code sandbox: https://codesandbox.io/s/k29r3928z7


#2

There’s no way around keeping a flag on the state of the click.

And there’s nothing wrong with using redux and storing state inside a component. Actually, if the state is temporary and/or it doesn’t need to be seen by another component, it’s recommended to keep it in the component. Simplicity wins always.

But if you want/need to use redux to track it, then you can

  • track the flag in the store, or
  • send the value to the action creator like below

Codepen: https://codesandbox.io/s/vxx727wly

const switcheroo = (value) => {
  return {
    type: 'SWITCH',
    value
  };
};

const switchReducer = (state = {value: 'Hello'}, action) => {
  switch (action.type) {
    case 'SWITCH':
      return { ...state, value: action.value };

    default:
      return state;
  }
}

class ClickMachine extends React.Component {
  render() {
    const { value, switcheroo } = this.props;
    return(
      <div>
        { /* the ternary inside the function call determines the argument */}
        <p
          onClick={() => switcheroo(value === 'Hello' ? 'Goodbye' : 'Hello')}>
          {value}
        </p>
      </div>
    )
  }
};

//...
const mapDispatchToProps = (dispatch) => ({
  switcheroo: (val) => dispatch(switcheroo(val)),
});

#3

Thank you! Passing the props around is what was confusing me. I’ll take this and keep working at it.