5.6 KiB
5.6 KiB
id | title | challengeType | isRequired | forumTopicId | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036141 | Getting Started with React Redux | 6 | false | 301430 | Начало работы с React Redux |
Description
react-redux
. Он предоставляет вам возможность передать state
Redux и dispatch
ваши компоненты React в качестве props
. В следующих нескольких задачах, во-первых, вы создадите простой компонент React, который позволит вам вводить новые текстовые сообщения. Они добавляются в массив, который отображается в представлении. Это должен быть хороший обзор того, что вы узнали на уроках React. Затем вы создадите хранилище Redux и действия, управляющие состоянием массива сообщений. Наконец, вы будете использовать react-redux
для подключения хранилища Redux к вашему компоненту, тем самым извлекая локальное состояние в хранилище Redux.
Instructions
DisplayMessages
. Добавьте конструктор к этому компоненту и инициализируйте его с состоянием, которое имеет два свойства: input
, который установлен в пустую строку, и messages
, которые установлены в пустой массив.
Tests
tests:
- text: The <code>DisplayMessages</code> component should render an empty <code>div</code> element.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find('div').text() === '' })());
- text: The <code>DisplayMessages</code> constructor should be called properly with <code>super</code>, passing in <code>props</code>.
testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/\s/g,''); return noWhiteSpace.includes('constructor(props)') && noWhiteSpace.includes('super(props'); })());
- text: 'The <code>DisplayMessages</code> component should have an initial state equal to <code>{input: "", messages: []}</code>.'
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; })());
Challenge Seed
class DisplayMessages extends React.Component {
// change code below this line
// change code above this line
render() {
return <div />
}
};
After Tests
ReactDOM.render(<DisplayMessages />, document.getElementById('root'))
Solution
class DisplayMessages extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
messages: []
}
}
render() {
return <div/>
}
};