LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Comment: fix memoization for multi-instance selector.

Browse source 
Since each comment will have a different key (and on other components, `props.uri` will differ), the selector cache won't work since the inputs keep changing.

The suggested solution is to apply a factory method wrap the selector -- this produces a unique memoized selector for each instance.
This commit is contained in:
infinite-persistence 2021-10-04 18:55:03 +08:00
parent ad5af98417
commit 875128fc94
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
1 changed files with 22 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
ui/component/comment/index.js
View file

@ -19,24 +19,30 @@ import { selectActiveChannelClaim } from 'redux/selectors/app';
import { selectPlayingUri } from 'redux/selectors/content';
import Comment from './view';
const select = (state, props) => {
const activeChannelClaim = selectActiveChannelClaim(state);
const makeMapStateToProps = (originalState, originalProps) => {
const activeChannelClaim = selectActiveChannelClaim(originalState);
const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
const reactionKey = activeChannelId ? `${props.commentId}:${activeChannelId}` : props.commentId;
const reactionKey = activeChannelId ? `${originalProps.commentId}:${activeChannelId}` : originalProps.commentId;
const selectOthersReactionsForComment = makeSelectOthersReactionsForComment(reactionKey);
return {
claim: makeSelectClaimForUri(props.uri)(state),
thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state),
channelIsBlocked: props.authorUri && makeSelectChannelIsMuted(props.authorUri)(state),
commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
othersReacts: makeSelectOthersReactionsForComment(reactionKey)(state),
activeChannelClaim,
myChannels: selectMyChannelClaims(state),
playingUri: selectPlayingUri(state),
stakedLevel: makeSelectStakedLevelForChannelUri(props.authorUri)(state),
linkedCommentAncestors: selectLinkedCommentAncestors(state),
totalReplyPages: makeSelectTotalReplyPagesForParentId(props.commentId)(state),
const select = (state, props) => {
const othersReacts = selectOthersReactionsForComment(state);
return {
claim: makeSelectClaimForUri(props.uri)(state),
thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state),
channelIsBlocked: props.authorUri && makeSelectChannelIsMuted(props.authorUri)(state),
commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
othersReacts,
activeChannelClaim,
myChannels: selectMyChannelClaims(state),
playingUri: selectPlayingUri(state),
stakedLevel: makeSelectStakedLevelForChannelUri(props.authorUri)(state),
linkedCommentAncestors: selectLinkedCommentAncestors(state),
totalReplyPages: makeSelectTotalReplyPagesForParentId(props.commentId)(state),
};
};
return select;
};
const perform = (dispatch) => ({
@ -47,4 +53,4 @@ const perform = (dispatch) => ({
doToast: (options) => dispatch(doToast(options)),
});
export default connect(select, perform)(Comment);
export default connect(makeMapStateToProps, perform)(Comment);