Javascript 在此react redux代码中在何处执行切换操作？

我这里有两个文件： App.js和reducer.js 我尝试使用React&Redux创建onclick切换动作（例如：背景颜色更改）。 有人能帮我在这段代码中在哪里做切换操作吗？（我以前在mapDispatchToProps中执行过setTimeout操作，它可以正常工作，但无法切换操作。） 参见代码：

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

有人知道如何在那里进行切换操作吗？ 我想将按钮的红色背景颜色更改为黄色，然后切换回acton，更改代码如下：

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

this.props.changeTheColor（this.props.backgroundColor==='red'？'yellow'：'red'）}>change
const mapDispatchToProps=调度=>{
返回{
更改颜色：（值）=>{
调度（更改颜色（值））；
}
};
};
常量changeColor=（值）=>{
返回{
键入：“更改颜色”，
价值
};
};
const reducer=（state=initialState，action）=>{
开关（动作类型）{
案例“更改颜色”：{
返回{…状态，背景颜色：action.value}
}
违约：
返回状态
};

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