freeCodeCamp

2.8 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036145	Map State to Props	6	false		Mapa do estado para adereços

Description

O componente Provider permite que você forneça o state e o dispatch para seus componentes React, mas você deve especificar exatamente qual estado e ações você deseja. Dessa forma, você garante que cada componente tenha acesso apenas ao estado de que precisa. Você consegue isso criando duas funções: mapStateToProps() e mapDispatchToProps() . Nessas funções, você declara quais partes do estado deseja ter acesso e quais ações criadores precisa ser capaz de enviar. Uma vez que estas funções estão no lugar, você verá como usar o Reagir Redux connect método para conectá-los aos seus componentes em um outro desafio. Nota: Nos bastidores, o React Redux usa o método store.subscribe() para implementar o mapStateToProps() .

Instructions

Crie uma função mapStateToProps() . Essa função deve usar o state como um argumento e, em seguida, retornar um objeto que mapeie esse estado para nomes de propriedade específicos. Essas propriedades se tornarão acessíveis ao seu componente por meio de props . Como este exemplo mantém todo o estado do aplicativo em um único array, você pode passar todo esse estado para o seu componente. Crie uma propriedade de messages no objeto que está sendo retornado e defina-a como state .

Tests

tests:
  - text: O <code>state</code> const deve ser um array vazio.
    testString: 'assert(Array.isArray(state) && state.length === 0, "The const <code>state</code> should be an empty array.");'
  - text: <code>mapStateToProps</code> deve ser uma função.
    testString: 'assert(typeof mapStateToProps === "function", "<code>mapStateToProps</code> should be a function.");'
  - text: <code>mapStateToProps</code> deve retornar um objeto.
    testString: 'assert(typeof mapStateToProps() === "object", "<code>mapStateToProps</code> should return an object.");'
  - text: Passar uma matriz como estado para <code>mapStateToProps</code> deve retornar essa matriz atribuída a uma chave de <code>messages</code> .
    testString: 'assert(mapStateToProps(["messages"]).messages.pop() === "messages", "Passing an array as state to <code>mapStateToProps</code> should return this array assigned to a key of <code>messages</code>.");'

Challenge Seed

const state = [];

// change code below this line

Solution

// solution required

2.8 KiB Raw Blame History