Где сделать действие переключения в этом реагирующем избыточном коде?

Question

У меня здесь 2 файла: приложение. js и редуктор. js Я пытаюсь использовать React & Redux для создания действия переключения по клику (например: изменение цвета фона). Может ли кто-нибудь помочь мне, где я могу сделать действие переключения в этом коде? (Я выполнял действие setTimeout в mapDispatchToProps и раньше, и это сработало, но переключить действие не удалось.) См. Код:

App.js

import React, { Component } from "react";
import "./App.css";
import { connect } from "react-redux";

class App extends Component {
  render() {
    return (
      <div>
        <button
          style={{
            backgroundColor: this.props.backgroundColor
          }}
        >
          hello
        </button>
        <button onClick={this.props.changeTheColor}>change</button>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    backgroundColor: state.backgroundColor
  };
};

const mapDispatchToProps = dispatch => {
  return {
    changeTheColor: () => {
      dispatch({ type: "CHANGE_COLOR" }); //I think something should change here but I have no idea how :(
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

и редуктор. js

const initialState = {
  backgroundColor: "red"
};

const reducer = (state = initialState, action) => {
  const updatedState = { ...state };

  if (action.type === "CHANGE_COLOR") {
    updatedState.backgroundColor = "yellow";  // I added else/if operation there before and didn't worked :(
  }

  return updatedState;
};

export default reducer;

Кто-нибудь знает? (s) как сделать там переключение действий? Я хочу изменить цвет фона кнопки на желтый и переключить обратно актон

Answer 1

Измените код следующим образом:

<button onClick={() => this.props.changeTheColor(this.props.backgroundColor === 'red' ? 'yellow' : 'red')}>change</button>             

    const mapDispatchToProps = dispatch => {
      return {
        changeTheColor: (value) => {
          dispatch(changeColor(value));
        }
      };
    };

    const changeColor = (value) => {
      return {
        type: 'CHANGE_COLOR',
        value
      };
    };

    const reducer = (state = initialState, action) => {             
       switch (action.type) {
          case "CHANGE_COLOR" : {
             return { ...state, backgroundColor : action.value }  
          }
          default:
            return state
     };