4.9 KiB
4.9 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036147 | Connect Redux to React | 6 | false | Подключите Redux к действию |
Description
mapStateToProps()
и mapDispatchToProps()
, вы можете использовать их для отображения state
и dispatch
в props
одного из ваших компонентов React. Метод connect
из React Redux может справиться с этой задачей. Этот метод принимает два необязательных аргумента: mapStateToProps()
и mapDispatchToProps()
. Они являются необязательными, потому что у вас может быть компонент, которому нужен только доступ к state
но ему не нужно отправлять какие-либо действия или наоборот. Чтобы использовать этот метод, передайте функции в качестве аргументов и немедленно вызовите результат с вашим компонентом. Этот синтаксис немного необычен и выглядит так: connect(mapStateToProps, mapDispatchToProps)(MyComponent)
Примечание. Если вы хотите опустить один из аргументов метода connect
, вы передаете null
на свое место. Instructions
mapStateToProps()
и mapDispatchToProps()
и новый компонент React, называемый Presentational
. Подключите этот компонент к Redux с помощью метода connect
из глобального объекта ReactRedux
и немедленно вызовите его на компоненте Presentational
. Назначьте результат новой const
называемой ConnectedComponent
которая представляет подключенный компонент. Вот и все, теперь вы подключены к Redux! Попробуйте изменить либо из connect
аргументов «s к null
и наблюдать за результатами испытаний. Tests
tests:
- text: <code>Presentational</code> компонент должен отображать.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The <code>Presentational</code> component should render.");'
- text: <code>Presentational</code> компонент должен получать <code>messages</code> оповещения через <code>connect</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return props.messages === "__INITIAL__STATE__"; })(), "The <code>Presentational</code> component should receive a prop <code>messages</code> via <code>connect</code>.");'
- text: <code>Presentational</code> компонент должен получить опору <code>submitNewMessage</code> через <code>connect</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return typeof props.submitNewMessage === "function"; })(), "The <code>Presentational</code> component should receive a prop <code>submitNewMessage</code> via <code>connect</code>.");'
Challenge Seed
const addMessage = (message) => {
return {
type: 'ADD',
message: message
}
};
const mapStateToProps = (state) => {
return {
messages: state
}
};
const mapDispatchToProps = (dispatch) => {
return {
submitNewMessage: (message) => {
dispatch(addMessage(message));
}
}
};
class Presentational extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h3>This is a Presentational Component</h3>
}
};
const connect = ReactRedux.connect;
// change code below this line
After Test
console.info('after the test');
Solution
// solution required