5.2 KiB
5.2 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036144 | Use Provider to Connect Redux to React | 6 | false | 使用Provider将Redux连接到React |
Description
react-redux
包来帮助完成这些任务。 React Redux提供了一个小API,它有两个关键特性: Provider
和connect
。另一个挑战包括connect
。 Provider
是React Redux的一个包装组件,它包装了你的React应用程序。然后,此包装器允许您访问整个组件树中的Redux store
和dispatch
功能。 Provider
需要两个道具,Redux商店和应用程序的子组件。为App组件定义Provider
可能如下所示: <Provider store = {store}>
<应用/>
</提供商>
Instructions
DisplayMessages
组件。唯一的新部分是底部的AppWrapper
组件。使用此顶级组件从ReactRedux
呈现Provider
,并将Redux存储作为prop传递。然后将DisplayMessages
组件渲染为子级。完成后,您应该看到React组件呈现给页面。 注意: React Redux在此处可用作全局变量,因此您可以使用点表示法访问提供程序。编辑器中的代码利用了这一点并将其设置为一个常量Provider
供您在AppWrapper
渲染方法中使用。 Tests
tests:
- text: <code>AppWrapper</code>应该渲染。
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").length === 1; })(), "The <code>AppWrapper</code> should render.");'
- text: <code>Provider</code>包装器组件应该具有传递给它的<code>store</code>支柱,等于Redux存储。
testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return getUserInput("index").replace(/\s/g,"").includes("<Providerstore={store}>"); })(), "The <code>Provider</code> wrapper component should have a prop of <code>store</code> passed to it, equal to the Redux store.");'
- text: <code>DisplayMessages</code>应该呈现为<code>AppWrapper</code> 。
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").find("DisplayMessages").length === 1; })(), "<code>DisplayMessages</code> should render as a child of <code>AppWrapper</code>.");'
- text: <code>DisplayMessages</code>组件应该呈现h2,input,button和<code>ul</code>元素。
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("div").length === 1 && mockedComponent.find("h2").length === 1 && mockedComponent.find("button").length === 1 && mockedComponent.find("ul").length === 1; })(), "The <code>DisplayMessages</code> component should render an h2, input, button, and <code>ul</code> element.");'
Challenge Seed
// Redux Code:
const ADD = 'ADD';
const addMessage = (message) => {
return {
type: ADD,
message
}
};
const messageReducer = (state = [], action) => {
switch (action.type) {
case ADD:
return [
...state,
action.message
];
default:
return state;
}
};
const store = Redux.createStore(messageReducer);
// React Code:
class DisplayMessages extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ",
messages: []
}
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
}
handleChange(event) {
this.setState({
input: event.target.value
});
}
submitMessage() {
const currentMessage = this.state.input;
this.setState({
input: ",
messages: this.state.messages.concat(currentMessage)
});
}
render() {
return (
<div>
<h2>Type in a new Message:</h2>
<input
value={this.state.input}
onChange={this.handleChange}/><br/>
<button onClick={this.submitMessage}>Submit</button>
<ul>
{this.state.messages.map( (message, idx) => {
return (
<li key={idx}>{message}</li>
)
})
}
</ul>
</div>
);
}
};
const Provider = ReactRedux.Provider;
class AppWrapper extends React.Component {
// render the Provider here
// change code above this line
};
After Test
console.info('after the test');
Solution
// solution required