freeCodeCamp

3.9 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036147	Connect Redux to React	6	false		Conecte o Redux para Reagir

Description

Agora que você mapStateToProps() as mapStateToProps() e mapDispatchToProps() , é possível usá-las para mapear state e dispatch para os props de um de seus componentes React. O método de connect do React Redux pode manipular essa tarefa. Esse método usa dois argumentos opcionais, mapStateToProps() e mapDispatchToProps() . Eles são opcionais porque você pode ter um componente que precisa apenas acessar o state mas não precisa despachar nenhuma ação, ou vice-versa. Para usar esse método, passe as funções como argumentos e chame imediatamente o resultado com seu componente. Esta sintaxe é um pouco incomum e se parece com: connect(mapStateToProps, mapDispatchToProps)(MyComponent) Nota: Se você quiser omitir um dos argumentos para o método connect , você passa null em seu lugar.

Instructions

O editor de código possui as mapStateToProps() e mapDispatchToProps() e um novo componente React chamado Presentational . Conecte esse componente ao Redux com o método connect do objeto global ReactRedux e chame-o imediatamente no componente Presentational . Atribua o resultado a uma nova const chamada ConnectedComponent que representa o componente conectado. É isso aí, agora você está conectado ao Redux! Tente alterar um dos argumentos da connect para null e observe os resultados do teste.

Tests

tests:
  - text: O componente <code>Presentational</code> deve renderizar.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The <code>Presentational</code> component should render.");'
  - text: O componente <code>Presentational</code> deve receber uma <code>messages</code> prop por <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: O componente <code>Presentational</code> deve receber um prop <code>submitNewMessage</code> via <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

3.9 KiB Raw Blame History