Reactjs 父组件和子组件中的MapStateToProps和MapDispachToProps不工作

在我的app.js中，我有我的mapDispachToProps函数，它应该向redux存储中的reducer发送一个类型为：increment的操作。当减速器接收到它时，他应该将初始状态增加1

在标题组件（app.js组件的子组件）中，我希望通过mapStateToProps和this.props.value显示新值。问题是它不工作，而且我在控制台中没有收到错误消息

当我在App.js中执行所有操作时，它工作得非常好

我做错了什么

提前谢谢

我的index.js

let store = createStore(increaseReducer);

ReactDOM.render(
  <Provider store = {store}>
    <App/>
  </Provider>,
  document.getElementById('root')
);

我的app.js

import React, {Component} from 'react';
import{ connect }from 'react-redux';
import {Heading} from './components/heading';

class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
  return (
    <div className="App">
       <Heading></Heading>
       <button onClick={this.props.increment} > Counter</button>
    </div>
  );
  }
}

let mapDispachToProps= {
  increment:()=> {
  return {type:"INCREMENT"}}
}

let AppContainer= connect(null,mapDispachToProps)(App);
export default AppContainer;

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“./components/Heading”导入{Heading}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
柜台
);
}
}
设mapDispachToProps={
增量：（）=>{
返回{type:“INCREMENT”}
}
让AppContainer=connect（null，mapdispatchtoprops）（App）；
导出默认AppContainer；

我的heading.js

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

export class Heading extends Component {
        constructor(props){
            super(props);
        }

        render() {
            return(
                    <h1>Click Counter: {this.props.value}  </h1>    
                )
        }
}

let mapStateToProps = (state)=>{return {
  value: state
}}

let headingContainer = connect(mapStateToProps)(Heading);

export default headingContainer;

import React，{Component}来自'React'；
从'react redux'导入{connect}；
导出类标题扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
单击计数器：{this.props.value}
)
}
}
让mapStateToProps=（state）=>{return{
值：state
}}
让headingContainer=connect（mapStateToProps）（标题）；
导出默认标题容器；

您需要调度您的操作：

const mapDispachToProps = dispatch => {
  return {
    increment: () => dispatch({
      type:"INCREMENT"
    }}
  }
}

减速器：

export default (state = 0, action) => {
    switch (action.type) {
      case 'INCREMENT':
        return state + 1;
      default:
        return state;
    }

---

标题导出默认值，因此应用程序中的标题应为：

import Heading from './components/heading';

以下是您的代码片段，它可以正常工作：

const{
供应商，
连接
}=反应次数；
const{createStore}=Redux；
常数{Component}=React；
函数increaseReducer（状态=0，操作）{
如果（action.type=='INCREMENT'）{
返回状态+1；
}否则{
返回状态；
}
}
let store=createStore（increaseReducer）；
//标题
类HeadingComponent扩展了组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回单击计数器：{this.props.value}；
}
}
让mapStateToProps=（状态）=>{
返回{
价值：国家，
};
};
让标题=连接（MapStateTops）（标题组件）；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{' '}
柜台
);
}
}
设mapDispachToProps={
增量：（）=>{
返回{type:'INCREMENT'}；
},
};
让AppContainer=connect（null，mapdispatchtoprops）（App）；
ReactDOM.render(
,
document.getElementById（'root'））
);

您需要发送您的actions@demkovych不，mapDispatchToProps可以是一个，mapDispatchToProps没有问题（除了神奇的字符串而不是常量）。如果将它们分派到某个地方，没有问题，但在这个问题上，他不使用动作。@demkovych是的，他使用：
我将代码复制到了我答案中的一个片段中，它可以工作。分派不是问题，导入是问题。感谢您的帮助，分派也有问题。标题子项不显示0的初始值。此开关与OP的if/else有何区别？但如何从elswhere导入？为什么你可以出口整个减速器？你可以随心所欲。在我的示例中，reducer是您的increaseReducer函数，但只是重写到单独的文件中。您可以从任何地方获得它，比如从'path_到'u your_reducer'导入{increaseReducer}@FabianAndiel这可能会有帮助
import Heading from './components/heading';