redux: fixed performance regression

src/components/logo/LogoDialog.jsx

@@ -8,7 +8,7 @@ type Props = {
   setLogo: Function,
 }
 
-export const LogoDialog = ({ logo, setLogo }: Props)  => (
+export const LogoDialog = ({ logo, setLogo }: Props) => (
   <div className="helper logo-helper">
     <div className="helper-back">
       <Icon icon="icon-logo" size={200} />

src/components/panels/EditorDialog.jsx

@@ -7,12 +7,13 @@ import { TrashDialog } from '$components/trash/TrashDialog';
 import { LogoDialog } from '$components/logo/LogoDialog';
 import { SaveDialog } from '$components/save/SaveDialog';
 import { CancelDialog } from '$components/save/CancelDialog';
-import type { UserType } from '$constants/types';
+
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { editor } from '$modules/Editor';
+
 
 import {
+  setMode,
   setLogo,
   routerCancel,
   routerSubmit,
@@ -21,31 +22,18 @@ import {
   clearPoly,
   clearAll,
   clearCancel,
+  stopEditing,
+  setEditing,
 } from '$redux/user/actions';
 
 type Props = {
   mode: String,
-  routerPoints: Number,
-  editor: Object,
   activeSticker: String,
-  logo: String,
-  user: UserType,
-  title: String,
-  address: String,
-
-  setLogo: Function,
-  routerSubmit: Function,
-  routerCancel: Function,
-  setActiveSticker: Function,
-  clearStickers: Function,
-  clearPoly: Function,
-  clearAll: Function,
-  clearCancel: Function,
 }
 
 export const Component = (props: Props) => {
   const {
-    mode, activeSticker, logo, user, title, address
+    mode, activeSticker,
   } = props;
 
   const showDialog = (
@@ -63,31 +51,14 @@ export const Component = (props: Props) => {
         { mode === MODES.ROUTER && <RouterDialog {...props} /> }
         { mode === MODES.STICKERS && <StickersDialog {...props} /> }
         { mode === MODES.TRASH && <TrashDialog {...props} /> }
-        { mode === MODES.LOGO && <LogoDialog editor={editor} logo={logo} setLogo={setLogo} /> }
-        { mode === MODES.SAVE && <SaveDialog editor={editor} user={user} title={title} address={address} /> }
-        { mode === MODES.CONFIRM_CANCEL && <CancelDialog editor={editor} /> }
+        { mode === MODES.LOGO && <LogoDialog {...props} /> }
+        { mode === MODES.SAVE && <SaveDialog {...props} /> }
+        { mode === MODES.CONFIRM_CANCEL && <CancelDialog {...props} /> }
       </div>
   );
 };
 
-function mapStateToProps(state) {
-  const {
-    user: {
-      mode, routerPoints, activeSticker, logo, user, title, address,
-    },
-  } = state;
-
-  return {
-    mode,
-    routerPoints,
-    activeSticker,
-    logo,
-    user,
-    title,
-    address,
-    editor,
-  };
-}
+const mapStateToProps = ({ user }) => ({ ...user });
 
 const mapDispatchToProps = dispatch => bindActionCreators({
   routerCancel,
@@ -98,6 +69,9 @@ const mapDispatchToProps = dispatch => bindActionCreators({
   clearPoly,
   clearAll,
   clearCancel,
+  stopEditing,
+  setEditing,
+  setMode,
 }, dispatch);
 
 export const EditorDialog = connect(

src/components/panels/EditorPanel.jsx

@@ -82,7 +82,6 @@ class Component extends React.PureComponent<Props, void> {
         <LogoPreview logo={logo} />
 
         <div className="control-dist">
-          {changed && '(ch) '}
           {distance} км
           <Icon icon="icon-cycle" size={32} />
           {

src/components/save/CancelDialog.jsx

@@ -1,18 +1,24 @@
 import React from 'react';
 
 import { MODES } from '$constants/modes';
+import { editor } from '$modules/Editor';
 
-export class CancelDialog extends React.Component {
+type Props = {
+  stopEditing: Function,
+  setMode: Function,
+  setEditing: Function,
+};
+
+export class CancelDialog extends React.Component<Props, void> {
   cancel = () => {
-    this.props.editor.stopEditing();
+    editor.cancelEditing();
+    // this.props.stopEditing();
+    this.props.setEditing(false);
+    this.props.setMode(MODES.NONE);
   };
 
   proceed = () => {
-    this.props.editor.changeMode(MODES.NONE);
-  };
-
-  save = () => {
-    this.props.editor.changeMode(MODES.SAVE);
+    this.props.setMode(MODES.NONE);
   };
 
   render() {
@@ -24,13 +30,10 @@ export class CancelDialog extends React.Component {
         </div>
         <div className="helper__buttons button-group">
           <div className="button router-helper__button" onClick={this.cancel}>
-            Закрыть
+            Удалить все
           </div>
-          <div className="button success router-helper__button" onClick={this.proceed}>
-            Продолжить
-          </div>
-          <div className="button primary router-helper__button" onClick={this.save}>
-            Сохранить
+          <div className="button primary router-helper__button" onClick={this.proceed}>
+            Вернуться
           </div>
         </div>
       </div>