Javascript React-mapStateToProps函数为'；在我的待办事项应用程序中没有被调用

这是我在Redux的第二天

应用程序的基本结构是：

App
-TodoForm
-TodoList
--TodoListItem

正在调用reducer函数，但它不调用

mapstatetops

。我尝试了

console.log（）

。我使用了

react hot样板文件

。请告诉我未调用

MapStateTops

函数的原因

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“redux”导入{createStore}
从“react-redux”导入{Provider，connect}
//贮藏
let store=createStore（todo）
//行动
const ADD_TODO='ADD_TODO'
设x=1
函数addTodo（文本）{
返回{
类型：ADD_TODO，
id:x++，
文本：文本
}
}
//减速器
函数todo（状态={id:0，文本：“”，完成：false}，操作）{
log（“称为减速机”）
console.log（操作）
开关（动作类型）{
案例“ADD_TODO”：
console.log（Object.assign（{}，state{
id:action.id，
text:action.text，
已完成：false
})！==州）
返回Object.assign（{}，state{
id:action.id，
text:action.text，
已完成：false
})
违约：
返回状态
}
}
//组件应用程序
类应用程序扩展组件{
onHandleSubmit（文本）{
log（'调用OnHandleSubmit'）
存储调度（addTodo（text））
console.log（'------------'）
store.getState（）
console.log（'------------'）
}
render（）{
console.log（this.props）
返回(
你好，世界。
);
}
}
函数mapStateToProps（状态，ownProps）{
console.log（“mapStateToProps”）
console.log（状态）
console.log（ownProps）
返回{
text:state.text，
id:state.id，
已完成：false
}
}
连接（mapStateToProps）（应用程序）
//组件形式
类TodoForm扩展了组件{
建造师（道具）{
超级（道具）
//this.handleAdd=this.handleAdd.bind（this）
}
//手持式（e）{
//e.预防违约（）
//console.log（例如target）
////分派（addTodo（e.value））
// }
render（）{
让输入
返回(
{
e、 预防默认值（）
如果（！input.value.trim（））{
返回
}
console.log（input.value）
this.props.onHandleSubmit（input.value）
//store.dispatch（addTodo（input.value））
//input.value=“”
} }>
{
输入=节点
} } />
添加待办事项
);
}
}
//成分托多利斯特
类TodoList扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
返回(

);
}
}
//成分托多利斯特
类TodoListItem扩展组件{
建造师（道具）{
超级（道具）
this.handleDelete=this.handleDelete.bind（this）
}
Handledelite（e）{
e、 预防默认值（）
console.log（e.value）
//此.props.dispatch（addTodo（e.value））；
}
render（）{
返回(
{this.props.text}
);
}
}
ReactDOM.render（，document.getElementById（'root'））；

连接（mapStateToProps）（应用）

返回连接的组件。写

const ConnectedApp = connect(mapStateToProps)(App);

然后：

ReactDOM.render（，document.getElementById（'root'）；

First things首先，您不应该在一个文件中包含操作、减缩器等。我理解，这可能值得重新开始，但我认为一旦事情开始运作，我将使用文件夹结构。尝试Damien方法，这将解决您的问题。

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