Redux无法在按钮上单击的问题

时间:2019-10-04 15:00:34

标签: reactjs redux

我是Redux的新手,正在学习如何在React中使用它。基本上,我在用react app设置Redux方面做得正确,但是当我单击按钮增量时,我希望显示计数器增加一。但是,当我这样做时,什么也没有发生,当然,我已经检查了发送和发送的动作,但是基本上一切正常。因此,我确实需要您的帮助,这是我正在使用的代码:

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
import { createStore } from "redux";
import reducer from "./store/reducer";
import { Provider } from "react-redux";

const store = createStore(reducer);
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);
registerServiceWorker();

reducer.js

const initialState = {
  counter: 0
};

const reducer = (state = initialState, action) => {
  if (action.type === "INCREMENT") {
    return { counter: state.counter + 1 };
  }

  return state;
};

export default reducer;

counter.js

import React, { Component } from "react";
import { connect } from "react-redux";

import CounterControl from "../../components/CounterControl/CounterControl";
import CounterOutput from "../../components/CounterOutput/CounterOutput";

class Counter extends Component {
  render() {
    return (
      <div>
        <CounterOutput value={this.props.ctr} />
        <CounterControl
          label="Increment"
          clicked={() => this.props.onIncrement}
        />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return { ctr: state.counter };
};

const mapDispatchToProps = dispatch => {
  return {
    onIncrement: () => dispatch({ type: "INCREMENT" })
  };
};

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

1 个答案:

答案 0 :(得分:0)

您是否在商店注册了减速机?

如果没有,请这样做。

我相信这件事不应该返回字符串:

const mapStateToProps = state => {
  return { ctr: state.counter };
};