connect
para conectar o React ao Redux, você pode aplicar o que aprendeu ao seu componente React que lida com mensagens. Na última lição, o componente que você conectou ao Redux chamava-se Presentational
, e isso não era arbitrário. Este termo geralmente se refere aos componentes React que não estão diretamente conectados ao Redux. Eles são simplesmente responsáveis pela apresentação da interface do usuário e fazem isso como uma função dos objetos que recebem. Por outro lado, os componentes do contêiner estão conectados ao Redux. Normalmente, eles são responsáveis por despachar ações para o armazenamento e, freqüentemente, passar o estado do armazenamento para componentes filhos como acessórios. Presentational
. Crie um novo componente mantido em uma constante chamada Container
que usa connect
para conectar o componente Presentational
ao Redux. Em seguida, no AppWrapper
, renderize o componente React Redux Provider
. Passe Provider
ao store
Redux como prop e renderize Container
como um filho. Depois que tudo estiver configurado, você verá o aplicativo de mensagens renderizado para a página novamente. AppWrapper
deve renderizar para a página.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").length === 1; })(), "The AppWrapper
should render to the page.");'
- text: 'O componente Presentational
deve renderizar os elementos h2
, input
, button
e ul
.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The Presentational
component should render an h2
, input
, button
, and ul
elements.");'
- text: 'O componente Presentational
deve renderizar os elementos h2
, input
, button
e ul
.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); return ( PresentationalComponent.find("div").length === 1 && PresentationalComponent.find("h2").length === 1 && PresentationalComponent.find("button").length === 1 && PresentationalComponent.find("ul").length === 1 ); })(), "The Presentational
component should render an h2
, input
, button
, and ul
elements.");'
- text: O componente Presentational
deve receber messages
da loja Redux como um prop.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); const props = PresentationalComponent.props(); return Array.isArray(props.messages); })(), "The Presentational
component should receive messages
from the Redux store as a prop.");'
- text: O componente Presentational
deve receber o criador da ação submitMessage
como um prop.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); const props = PresentationalComponent.props(); return typeof props.submitNewMessage === "function"; })(), "The Presentational
component should receive the submitMessage
action creator as a prop.");'
```