freeCodeCamp

3.8 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036145	Map State to Props	6	false		Состояние карты для реквизита

Description

Компонент Provider позволяет вам предоставлять state и dispatch ваши компоненты React, но вы должны точно указать, какое состояние и действия вы хотите. Таким образом, вы убедитесь, что каждый компонент имеет доступ только к состоянию, в котором он нуждается. Вы достигаете этого, создавая две функции: mapStateToProps() и mapDispatchToProps() . В этих функциях вы объявляете, какие части состояния вы хотите иметь доступ и какие создатели действий вы должны иметь возможность отправлять. После того, как эти функции находятся в месте, вы увидите , как использовать Реагировать Redux connect метод , чтобы соединить их к компонентам в другом вызове. Примечание. За кулисами React Redux использует метод store.subscribe() для реализации mapStateToProps() .

Instructions

Создайте функцию mapStateToProps() . Эта функция должна принимать state как аргумент, а затем возвращать объект, который отображает это состояние в имена конкретных свойств. Эти свойства станут доступными для вашего компонента через props . Поскольку этот пример поддерживает все состояние приложения в одном массиве, вы можете передать это целое состояние вашему компоненту. Создайте messages свойств в возвращаемом объекте и установите его state .

Tests

tests:
  - text: Конст <code>state</code> должно быть пустым массивом.
    testString: 'assert(Array.isArray(state) && state.length === 0, "The const <code>state</code> should be an empty array.");'
  - text: <code>mapStateToProps</code> должна быть функцией.
    testString: 'assert(typeof mapStateToProps === "function", "<code>mapStateToProps</code> should be a function.");'
  - text: <code>mapStateToProps</code> должен возвращать объект.
    testString: 'assert(typeof mapStateToProps() === "object", "<code>mapStateToProps</code> should return an object.");'
  - text: 'Передача массива как состояния в <code>mapStateToProps</code> должна вернуть этот массив, назначенный для ключа <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

3.8 KiB Raw Blame History Unescape Escape