В последней статье этой серии я хочу продемонстрировать, как получать или извлекать данные из хранилища Redux.
Прежде чем читать этот пост, я бы порекомендовал вам прочитать Часть 1, в которой дается обзор функции connect(), и Часть 2, в которой подробно описано, как отправлять данные в хранилище Redux. Это должно облегчить дальнейшее продвижение.
Меню
Во-первых, давайте обсудим mapStateToProps — первый параметр функции connect(), как было показано в части 1 этой серии.
mapStateToProps , подобно меню из школьной столовой, используется для указания, какие данные из хранилища (состояния или дерева состояний) ваш компонент заинтересован получать постоянно.
Если вы не хотите, чтобы ваш подключенный компонент получал данные из хранилища, то передайте null или undefined в качестве первого аргумента функции connect().
Что бы вы хотели к еде, мэм?
mapStateToProps — это функция, которая может принимать state и ownProps в качестве аргументов. state представляет все дерево состояний хранилища Redux, а ownProps относится к props, переданному подключенному компоненту.
То, как вы определяете свою функцию mapStateToProps, определяет, будут ли state и ownProps приниматься в качестве аргументов.
Можно мне всего понемногу?
Если определение не содержит параметров или содержит два параметра, то в качестве аргументов будут переданы как state, так и ownProps. Если это сделать, то компонент будет повторно отображаться, когда будет обнаружено изменение либо в state, либо в ownProps.
Просто дай мне кетчуп и подержи майонез
С другой стороны, если указан только один параметр, то в качестве аргумента будет передано только state. В этом случае компонент будет повторно отображаться только в том случае, если было обнаружено изменение в state.
Что-то не так
Если вы не знакомы с понятиями мутации и неизменности, самое время познакомиться. Это избавит вас от многих головных и душевных болей. Ниже я дам ссылки на статьи, в которых об этом говорится более подробно.
Почему я говорю о неизменности? Состояние должно быть неизменяемым объектом. Если состояние только изменено, то функция mapStateToProps не обнаружит изменения и не будет работать должным образом.
Вот ваш заказ, мэм
Функция mapStateToProps возвращает простой объект.
Поля в этом объекте будут доступны как props для вашего подключенного компонента, а значениями будут данные, которые вы хотели получить из хранилища.
Например, если состояние определяется как:
Затем объект, возвращаемый из mapStateToProps, можно определить следующим образом:
Подключенный компонент может получить доступ к полям объекта таким же образом, как и другие props. Два распространенных способа — использовать либоprops.<fieldName>
или деструктурировать свойства и вызвать <fieldName> непосредственно в коде.
И, сцена
На этом мы подошли к концу этой серии из трех частей, и я надеюсь, что эти посты облегчили понимание механики функции connect().
В будущем я расскажу о хуках Redux, поскольку они предлагаются как более удобные для новичков варианты.
Если у вас есть какие-либо вопросы, комментарии или предложения, оставьте их ниже или свяжитесь со мной в Твиттере @HMCodes.
