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

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

@ -19,17 +19,21 @@ 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);
const select = (state, props) => {
const othersReacts = selectOthersReactionsForComment(state);
return { return {
claim: makeSelectClaimForUri(props.uri)(state), claim: makeSelectClaimForUri(props.uri)(state),
thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state), thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state),
channelIsBlocked: props.authorUri && makeSelectChannelIsMuted(props.authorUri)(state), channelIsBlocked: props.authorUri && makeSelectChannelIsMuted(props.authorUri)(state),
commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true, commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
othersReacts: makeSelectOthersReactionsForComment(reactionKey)(state), othersReacts,
activeChannelClaim, activeChannelClaim,
myChannels: selectMyChannelClaims(state), myChannels: selectMyChannelClaims(state),
playingUri: selectPlayingUri(state), playingUri: selectPlayingUri(state),
@ -38,6 +42,8 @@ const select = (state, props) => {
totalReplyPages: makeSelectTotalReplyPagesForParentId(props.commentId)(state), totalReplyPages: makeSelectTotalReplyPagesForParentId(props.commentId)(state),
}; };
}; };
return select;
};
const perform = (dispatch) => ({ const perform = (dispatch) => ({
clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })), clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
@ -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);