freeCodeCamp/curriculum/challenges/portuguese/03-front-end-development-libraries/react-and-redux/map-state-to-props.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036145	Mapear state para props	6	301433	map-state-to-props

--description--

O componente Provider permite que você forneça state e dispatch para seus componentes React, mas você deve especificar exatamente que state e actions deseja. Desta forma, você tem certeza que cada componente só tem acesso ao state de que precisa. Você consegue isso criando duas funções: mapStateToProps() e mapDispatchToProps().

Nessas funções, você declara quais pedaços do state você quer ter acesso e quais criadores de ação você precisa ser capaz de despachar. Quando essas funções estiverem no lugar, você verá como usar o método connect do React Redux para conectá-los aos seus componentes em outro desafio.

Observação: nos bastidores, o React Redux usa o método store.subscribe() para implementar mapStateToProps().

--instructions--

Crie a função mapStateToProps(). Esta função deve receber state como um argumento, em seguida, retornar um objeto que mapeia esse state para nomes de propriedade específicos. Essas propriedades se tornarão acessíveis para o componente via props. Uma vez que esse exemplo mantém o estado inteiro do app em um único array, você pode passar todo o state para o seu componente. Cria uma propriedade messages no objeto que está sendo retornado e defina-a no state.

--hints--

A const state deve ser um array vazio.

assert(Array.isArray(state) && state.length === 0);

mapStateToProps deve ser uma função.

assert(typeof mapStateToProps === 'function');

mapStateToProps deve retornar um objeto.

assert(typeof mapStateToProps() === 'object');

Passar um array como state para mapStateToProps deve retornar esse array atribuído à chave messages.

assert(mapStateToProps(['messages']).messages.pop() === 'messages');

--seed--

--seed-contents--

const state = [];

// Change code below this line

--solutions--

const state = [];

// Change code below this line

const mapStateToProps = (state) => {
  return {
    messages: state
  }
};