react-redux
包,通过这个方式把 Redux 的state
和dispatch
作为props
传给组件。
在接下来的挑战中,先要创建一个可输入新文本消息的 React 组件,添加这些消息到数组里,在视图上显示数组。接着,创建 Redux store 和 actions 来管理消息数组的状态。最后,使用react-redux
连接 Redux store 和组件,从而将本地状态提取到 Redux store 中。
DisplayMessages
组件,把构造函数添加到此组件中,使用含两个属性的状态初始化该组件,这两个属性为:input(设置为空字符串),messages
(设置为空数组)。
DisplayMessages
组件应渲染空的div
元素。
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find('div').text() === '' })());
- text: DisplayMessages
组件的构造函数应调用super
,传入props
。
testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/\s/g,''); return noWhiteSpace.includes('constructor(props)') && noWhiteSpace.includes('super(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; })());"
```