react-redux
包。它为您提供了Redux的传递方式state
,并dispatch
到你的反应的组分作为props
。在接下来的几个挑战中,首先,您将创建一个简单的React组件,允许您输入新的文本消息。这些将添加到视图中显示的数组中。这应该是您在React课程中学到的内容的一个很好的回顾。接下来,您将创建一个Redux存储和操作来管理messages数组的状态。最后,您将使用react-redux
将Redux存储与您的组件连接,从而将本地状态提取到Redux存储中。 DisplayMessages
组件开始。一个构造添加到该组件,并使用具有两个属性的状态初始化: input
,其被设置为一个空字符串,和messages
,这是设置为空数组。 DisplayMessages
组件应呈现一个空的div
元素。
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find("div").text() === "" })(), "The DisplayMessages
component should render an empty div
element.");'
- text: 应该使用super
正确调用DisplayMessages
构造函数,传入props
。
testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").replace(/\s/g,""); return noWhiteSpace.includes("constructor(props)") && noWhiteSpace.includes("super(props"); })(), "The DisplayMessages
constructor should be called properly with super
, passing in props
.");'
- text: 'DisplayMessages
组件的初始状态应等于{input: "", messages: []}
。'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return typeof initialState === "object" && initialState.input === "" && Array.isArray(initialState.messages) && initialState.messages.length === 0; })(), "The DisplayMessages
component should have an initial state equal to {input: "", messages: []}
.");'
```