javascript - 尝试构建一个基本的 React-Redux 点击切换器，但没有显示任何内容

Question

该应用程序应该只显示“Hello”，当您单击它时，切换到“Goodbye”，但它不会呈现“Hello”。我已经设置了默认状态，连接了所有东西，等等，但我不知道我错过了什么。

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

我的 CodeSandbox 在这里:https://codesandbox.io/s/k29r3928z7我有以下依赖项:

• react
• react-dom
• react-redux
• 还原

Answer 1

这是因为您没有将 connect 函数分配给组件，否则 redux 将不会与 ClickMachine 组件关联只要改变这一行，它就会起作用

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

沙盒链接 https://codesandbox.io/s/4x2pr03489