re-reselect proof of concept + fix Date selector as first example

`makeSelectDataForUri` always returns a new reference, so `ClaimPreview` was constantly being rendered. It's pretty expensive since `ClaimPreview`'s rendering checks against a huge blocklist, which is another issue on it's own.

- This commit tests the usage of `re-reselect` as the solution to the multi-instance memoization problem (https://github.com/toomuchdesign/re-reselect/blob/master/examples/1-join-selectors.md)
This commit is contained in:
infinite-persistence 2021-10-08 09:57:48 +08:00 committed by jessopb
parent e262e44912
commit 26f89b3ec9
6 changed files with 62 additions and 16 deletions

View file

@ -56,6 +56,7 @@
"match-sorter": "^6.3.0",
"parse-duration": "^1.0.0",
"proxy-polyfill": "0.1.6",
"re-reselect": "^4.0.0",
"react-datetime-picker": "^3.2.1",
"react-plastic": "^1.1.1",
"react-top-loading-bar": "^2.0.1",

View file

@ -1,6 +1,6 @@
import { connect } from 'react-redux';
import {
makeSelectClaimForUri,
selectClaimForUri,
makeSelectIsUriResolving,
makeSelectClaimIsMine,
makeSelectClaimIsPending,
@ -8,7 +8,7 @@ import {
makeSelectReflectingClaimForUri,
makeSelectClaimWasPurchased,
makeSelectTitleForUri,
makeSelectDateForUri,
selectDateForUri,
} from 'redux/selectors/claims';
import { makeSelectStreamingUrlForUri } from 'redux/selectors/file_info';
import {
@ -30,14 +30,14 @@ import ClaimPreview from './view';
import formatMediaDuration from 'util/formatMediaDuration';
const select = (state, props) => {
const claim = props.uri && makeSelectClaimForUri(props.uri)(state);
const claim = props.uri && selectClaimForUri(state, props.uri);
const media = claim && claim.value && (claim.value.video || claim.value.audio);
const mediaDuration = media && media.duration && formatMediaDuration(media.duration, { screenReader: true });
return {
claim,
mediaDuration,
date: props.uri && makeSelectDateForUri(props.uri)(state),
date: props.uri && selectDateForUri(state, props.uri),
title: props.uri && makeSelectTitleForUri(props.uri)(state),
pending: props.uri && makeSelectClaimIsPending(props.uri)(state),
reflectingProgress: props.uri && makeSelectReflectingClaimForUri(props.uri)(state),
@ -45,7 +45,6 @@ const select = (state, props) => {
claimIsMine: props.uri && makeSelectClaimIsMine(props.uri)(state),
isResolvingUri: props.uri && makeSelectIsUriResolving(props.uri)(state),
isResolvingRepost: props.uri && makeSelectIsUriResolving(props.repostUrl)(state),
repostClaim: props.uri && makeSelectClaimForUri(props.uri)(state),
nsfw: props.uri && makeSelectClaimIsNsfw(props.uri)(state),
blackListedOutpoints: selectBlackListedOutpoints(state),
filteredOutpoints: selectFilteredOutpoints(state),

View file

@ -6,7 +6,7 @@ import {
makeSelectTitleForUri,
makeSelectChannelForClaimUri,
makeSelectClaimIsNsfw,
makeSelectDateForUri,
selectDateForUri,
} from 'redux/selectors/claims';
import { doFileGet } from 'redux/actions/file';
import { doResolveUri } from 'redux/actions/claims';
@ -24,7 +24,7 @@ const select = (state, props) => {
return {
claim,
mediaDuration,
date: props.uri && makeSelectDateForUri(props.uri)(state),
date: props.uri && selectDateForUri(state, props.uri),
channel: props.uri && makeSelectChannelForClaimUri(props.uri)(state),
isResolvingUri: props.uri && makeSelectIsUriResolving(props.uri)(state),
thumbnail: props.uri && makeSelectThumbnailForUri(props.uri)(state),

View file

@ -1,11 +1,11 @@
import { connect } from 'react-redux';
import { makeSelectDateForUri } from 'redux/selectors/claims';
import { selectDateForUri } from 'redux/selectors/claims';
import * as SETTINGS from 'constants/settings';
import { makeSelectClientSetting } from 'redux/selectors/settings';
import DateTime from './view';
const select = (state, props) => ({
date: props.date || makeSelectDateForUri(props.uri)(state),
date: props.date || selectDateForUri(state, props.uri),
clock24h: makeSelectClientSetting(SETTINGS.CLOCK_24H)(state),
});
export default connect(select)(DateTime);

View file

@ -2,20 +2,22 @@
import { normalizeURI, parseURI, isURIValid } from 'util/lbryURI';
import { selectSupportsByOutpoint } from 'redux/selectors/wallet';
import { createSelector } from 'reselect';
import { createCachedSelector } from 're-reselect';
import { isClaimNsfw, filterClaims } from 'util/claim';
import * as CLAIM from 'constants/claim';
type State = { claims: any };
const selectState = (state) => state.claims || {};
export const selectById = createSelector(selectState, (state) => state.byId || {});
export const selectPendingClaimsById = createSelector(selectState, (state) => state.pendingById || {});
export const selectById = (state: State) => selectState(state).byId || {};
export const selectPendingClaimsById = (state: State) => selectState(state).pendingById || {};
export const selectClaimsById = createSelector(selectById, selectPendingClaimsById, (byId, pendingById) => {
return Object.assign(byId, pendingById); // do I need merged to keep metadata?
});
export const selectClaimIdsByUri = createSelector(selectState, (state) => state.claimsByUri || {});
export const selectClaimIdsByUri = (state: State) => selectState(state).claimsByUri || {};
export const selectCurrentChannelPage = createSelector(selectState, (state) => state.currentChannelPage || 1);
@ -74,6 +76,43 @@ export const selectReflectingById = createSelector(selectState, (state) => state
export const makeSelectClaimForClaimId = (claimId: string) => createSelector(selectClaimsById, (byId) => byId[claimId]);
export const selectClaimForUri = createCachedSelector(
selectClaimIdsByUri,
selectClaimsById,
(state, uri) => uri,
(state, uri, returnRepost = true) => returnRepost,
(byUri, byId, uri, returnRepost) => {
const validUri = isURIValid(uri);
if (validUri && byUri) {
const claimId = uri && byUri[normalizeURI(uri)];
const claim = byId[claimId];
// Make sure to return the claim as is so apps can check if it's been resolved before (null) or still needs to be resolved (undefined)
if (claimId === null) {
return null;
} else if (claimId === undefined) {
return undefined;
}
const repostedClaim = claim && claim.reposted_claim;
if (repostedClaim && returnRepost) {
const channelUrl =
claim.signing_channel && (claim.signing_channel.canonical_url || claim.signing_channel.permanent_url);
return {
...repostedClaim,
repost_url: normalizeURI(uri),
repost_channel_url: channelUrl,
repost_bid_amount: claim && claim.meta && claim.meta.effective_amount,
};
} else {
return claim;
}
}
}
)((state, uri, returnRepost = true) => `${uri}:${returnRepost ? '1' : '0'}`);
export const makeSelectClaimForUri = (uri: string, returnRepost: boolean = true) =>
createSelector(selectClaimIdsByUri, selectClaimsById, (byUri, byId) => {
const validUri = isURIValid(uri);
@ -242,8 +281,9 @@ export const makeSelectMetadataItemForUri = (uri: string, key: string) =>
export const makeSelectTitleForUri = (uri: string) =>
createSelector(makeSelectMetadataForUri(uri), (metadata) => metadata && metadata.title);
export const makeSelectDateForUri = (uri: string) =>
createSelector(makeSelectClaimForUri(uri), (claim) => {
export const selectDateForUri = createCachedSelector(
selectClaimForUri, // input: (state, uri, ?returnRepost)
(claim) => {
const timestamp =
claim &&
claim.value &&
@ -257,7 +297,8 @@ export const makeSelectDateForUri = (uri: string) =>
}
const dateObj = new Date(timestamp);
return dateObj;
});
}
)((state, uri) => uri);
export const makeSelectAmountForUri = (uri: string) =>
createSelector(makeSelectClaimForUri(uri), (claim) => {

View file

@ -13179,6 +13179,11 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
re-reselect@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/re-reselect/-/re-reselect-4.0.0.tgz#9ddec4c72c4d952f68caa5aa4b76a9ed38b75cac"
integrity sha512-wuygyq8TXUlSdVXv2kigXxQNOgdb9m7LbIjwfTNGSpaY1riLd5e+VeQjlQMyUtrk0oiyhi1AqIVynworl3qxHA==
react-async-script@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/react-async-script/-/react-async-script-1.1.1.tgz#f481c6c5f094bf4b94a9d52da0d0dda2e1a74bdf"