react-redux
para ajudar a realizar essas tarefas. O React Redux fornece uma pequena API com dois recursos principais: Provider
e connect
. Outro desafio abrange a connect
. O Provider
é um componente wrapper do React Redux que envolve seu aplicativo React. Este wrapper permite que você acesse as funções de store
e dispatch
do Redux em toda a árvore de componentes. Provider
leva dois adereços, o armazenamento Redux e os componentes filhos do seu aplicativo. Definir o Provider
para um componente de aplicativo pode ser assim: <Loja do provedor = {store}>
<App />
</ Provedor>
DisplayMessages
do Redux. A única peça nova é o componente AppWrapper
na parte inferior. Use este componente de nível superior para renderizar o Provider
partir do ReactRedux
e passe o repositório do Redux como prop. Em seguida, renderize o componente DisplayMessages
como um filho. Quando terminar, você verá o componente React renderizado na página. Nota: React Redux está disponível como uma variável global aqui, então você pode acessar o Provider com notação de ponto. O código no editor tira proveito disso e o configura para um Provider
constante para você usar no método de renderização AppWrapper
. AppWrapper
deve renderizar.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").length === 1; })(), "The AppWrapper
should render.");'
- text: 'O componente wrapper Provider
deve ter um prop de store
passado para ele, igual ao repositório Redux.'
testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return getUserInput("index").replace(/\s/g,"").includes("Provider
wrapper component should have a prop of store
passed to it, equal to the Redux store.");'
- text: DisplayMessages
deve renderizar como filho do AppWrapper
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").find("DisplayMessages").length === 1; })(), "DisplayMessages
should render as a child of AppWrapper
.");'
- text: 'O componente DisplayMessages
deve renderizar um elemento h2, input, button e ul
.'
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 DisplayMessages
component should render an h2, input, button, and ul
element.");'
```