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