javascript - react +Redux |此处 Prop 返回未定义 - 为什么？

Question

我最近学习了一些基本的 Redux，并浏览了他们文档中的教程。

我有一个 React 演示类组件，我希望它也成为自己的容器组件，名为 Word .

我希望它的 props 值来自 Redux 存储。我能够从商店的初始状态成功获取其 Prop 的初始值，但是当我尝试分派(dispatch)操作时，其属性 wordParts返回undefined .

这是 Word 的结构:

Word : {
  wordParts : <array>
  stem : <object> //I'm using a string for now for testing
}

这是商店的结构:

store : {
  word : {
    wordParts : <array>
    stem : <object> //I'm using a string for now for testing
  }
}

这就是我希望操作在调度时执行的操作:

//is used to update Word.stem
replaceStem(stem) = currentStem => newStem 

//is used to add a some `suffix` variable as the last element of the current Word.wordParts
addSuffix(suffix) = currentWordParts => [...currentWordParts, suffix] 

这是我的代码 - 我还有一些其他不相关的代码，我对其进行了一些更改以删除不相关的代码(例如样式)，但它的行为应该与我的本地代码相同。

https://codesandbox.io/s/rj2xlryx8m

Answer 1

React 和 Redux 的结构和标记都非常奇怪，我无法为您提供正确的语法，但是在这个 mapStateToProps 的 Word 容器中，您需要返回这些来自的 props Redux 商店:

return {
 whateverProps: state.whateverProps
}

然后，当您想在组件中传递这些 Prop 时，您可以通过以下方式访问和传递它们:

this.props.whateverProps