freeCodeCamp

4.3 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036141	Getting Started with React Redux	6	false		Começando com o React Redux

Description

Esta série de desafios apresenta como usar o Redux com o React. Primeiro, aqui está uma revisão de alguns dos principais princípios de cada tecnologia. React é uma biblioteca de visualizações que você fornece com dados e renderiza a exibição de maneira eficiente e previsível. O Redux é uma estrutura de gerenciamento de estado que você pode usar para simplificar o gerenciamento do estado da sua aplicação. Normalmente, em um aplicativo React Redux, você cria um único repositório Redux que gerencia o estado de todo o aplicativo. Seus componentes do React assinam apenas os dados na loja que são relevantes para sua função. Em seguida, você envia ações diretamente dos componentes React, que acionam as atualizações da loja. Embora os componentes do React possam gerenciar seu próprio estado localmente, quando você tem um aplicativo complexo, geralmente é melhor manter o estado do aplicativo em um único local com o Redux. Há exceções quando componentes individuais podem ter um estado local específico somente para eles. Finalmente, como o Redux não foi projetado para funcionar com o React fora da caixa, você precisa usar o pacote react-redux . Ele fornece uma maneira de você passar o state Redux e dispatch para seus componentes React como props . Nos próximos desafios, primeiro, você criará um componente React simples que permitirá a entrada de novas mensagens de texto. Estes são adicionados a uma matriz que é exibida na exibição. Esta deve ser uma boa revisão do que você aprendeu nas lições do React. Em seguida, você criará um armazenamento Redux e ações que gerenciam o estado da matriz de mensagens. Finalmente, você usará react-redux para conectar o repositório do Redux com seu componente, extraindo assim o estado local para o repositório do Redux.

Instructions

Comece com um componente DisplayMessages . Adicione um construtor a esse componente e inicialize-o com um estado que tenha duas propriedades: input , definida como uma cadeia vazia, e messages , configuradas como uma matriz vazia.

Tests

tests:
  - text: O componente <code>DisplayMessages</code> deve renderizar um elemento <code>div</code> vazio.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find("div").text() === "" })(), "The <code>DisplayMessages</code> component should render an empty <code>div</code> element.");'
  - text: 'O construtor <code>DisplayMessages</code> deve ser chamado corretamente com <code>super</code> , passando em <code>props</code> .'
    testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").replace(/\s/g,""); return noWhiteSpace.includes("constructor(props)") && noWhiteSpace.includes("super(props"); })(), "The <code>DisplayMessages</code> constructor should be called properly with <code>super</code>, passing in <code>props</code>.");'
  - text: 'O componente <code>DisplayMessages</code> deve ter um estado inicial igual a <code>{input: &quot;&quot;, 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; })(), "The <code>DisplayMessages</code> component should have an initial state equal to <code>{input: "", messages: []}</code>.");'

Challenge Seed

class DisplayMessages extends React.Component {
  // change code below this line

  // change code above this line
  render() {
    return <div />
  }
};

After Test

console.info('after the test');

Solution

// solution required

4.3 KiB Raw Blame History