尝试构建一个基本的react redux click切换器,但没有显示任何内容

应用程序应该只显示“你好”,当你点击它时,切换到“再见”,但它不会呈现“你好”。我已经设置了默认状态,连接了所有的东西,等等,但是我不知道我缺少了什么。

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

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()),
});

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

我的代码沙盒在这里: https://codesandbox.io/s/k29r3928z7 我有以下依赖关系:

• 反应
• 反应dom
• 反应红
• 雷杜