在此 React redux 代码中在哪里进行切换操作？

Question

我这里有 2 个文件： 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);

和reducer.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;

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

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

在此 React redux 代码中在哪里进行切换操作？

Where to make a toggle action in this react redux code?

javascript

reactjs

redux

react-redux

es6-class