b733215c5f
* PublishFile: fix render function violation Per doc: > A React component should not cause side effects in other components during rendering. Even in own render function (allowed to call), it should be avoided as it could cause infinite loops. * PublishFile: fix useEffect infinite loop due to bad dependency ## Issue One of the effects was adding an internal wrapper function as a dependency. As this is a functional component, the wrapper is re-created on every render and would spark the effect. That effect also updates redux (depending on the code path), so we end up in a loop. ## Change 1 Two options to fix the dependency: 1. Just remove the wrappers from the list, since we "know" it is essentially the same function (i.e. it's not function-variable that could point to something else at runtime). 2. Peek into the wrapper and determine what are the actual dependencies (usually props or data derived from props). Solution 2 is the norm. Aside: wrappers are usually the root-cause of incorrect dependencies, because they mask away the actual code. Need to always peek into it. ## Change 2 Next, change the dispatch-to-props map from function version to object version so that we have stable references to the actions. The object version is also preferred when we don't need to make any customizations to the actions.
32 lines
1.3 KiB
JavaScript
32 lines
1.3 KiB
JavaScript
import { connect } from 'react-redux';
|
|
import { selectBalance } from 'redux/selectors/wallet';
|
|
import { selectIsStillEditing, makeSelectPublishFormValue } from 'redux/selectors/publish';
|
|
import { doUpdatePublishForm, doClearPublish } from 'redux/actions/publish';
|
|
import { selectIsStreamPlaceholderForUri } from 'redux/selectors/claims';
|
|
import { doToast } from 'redux/actions/notifications';
|
|
import { selectFfmpegStatus } from 'redux/selectors/settings';
|
|
import PublishPage from './view';
|
|
|
|
const select = (state, props) => ({
|
|
name: makeSelectPublishFormValue('name')(state),
|
|
title: makeSelectPublishFormValue('title')(state),
|
|
filePath: makeSelectPublishFormValue('filePath')(state),
|
|
remoteUrl: makeSelectPublishFormValue('remoteFileUrl')(state),
|
|
optimize: makeSelectPublishFormValue('optimize')(state),
|
|
isStillEditing: selectIsStillEditing(state),
|
|
balance: selectBalance(state),
|
|
publishing: makeSelectPublishFormValue('publishing')(state),
|
|
ffmpegStatus: selectFfmpegStatus(state),
|
|
size: makeSelectPublishFormValue('fileSize')(state),
|
|
duration: makeSelectPublishFormValue('fileDur')(state),
|
|
isVid: makeSelectPublishFormValue('fileVid')(state),
|
|
isLivestreamClaim: selectIsStreamPlaceholderForUri(state, props.uri),
|
|
});
|
|
|
|
const perform = {
|
|
doClearPublish,
|
|
doUpdatePublishForm,
|
|
doToast,
|
|
};
|
|
|
|
export default connect(select, perform)(PublishPage);
|