almost works

src/client/Containers/Calculation/Sections/index.ts

@@ -39,4 +39,16 @@ export default [
       },
     ],
   },
+  {
+    title: "SecondSection",
+    elements: [
+      {
+        name: "priceonAnotherTab",
+        Component: withTitle("Price on another tab")(Input),
+        props: {
+          sourceValueName: "price",
+        },
+      },
+    ],
+  },
 ];

src/client/Containers/Calculation/index.jsx

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import Sections from "./Sections";
 
 import { Tabs } from "antd";
+import { Box } from "client/UIKit/grid";
 const { TabPane } = Tabs;
 
 const Calculation = () => {
@@ -12,7 +13,11 @@ const Calculation = () => {
         {Sections.map(({ title, elements }, i) => (
           <TabPane tab={title} key={i}>
             {elements.map(({ Component, props }, ie) => {
-              return <Component {...props} key={ie} />;
+              return (
+                <Box width="250px" my="10px">
+                  <Component {...props} key={ie} />
+                </Box>
+              );
             })}
           </TabPane>
         ))}

src/client/Effects/index.ts

@@ -4,6 +4,7 @@ import { TEffect } from "core/types/effect";
 export const testEffectForPrice: TEffect = async (
   calculationStore: CalculationStore
 ) => {
+  console.log("priceEffect");
   const price = calculationStore.getValue("price");
   if (parseInt(price) > 5000) {
     calculationStore.setValue("one", 200);

src/client/Elements/Input.jsx

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from "react";
 import { Input as AntInput } from "antd";
-import { useDebounce } from "use-debounce";
-import { useObserver, observer } from "mobx-react";
 import { useStores } from "client/hooks/useStores";
 import runEffects from "client/tools/runEffects";
+import { observer } from "mobx-react";
+import React, { useEffect, useState } from "react";
+import { useDebounce } from "use-debounce";
 
 const Input = ({
   readonly,
@@ -26,16 +26,16 @@ const Input = ({
     }
   }, [sourceValue, sourceValueName]);
 
-  // run Effects
+  // set Value to global store and run Effects
   useEffect(() => {
-    if (Effects && Effects.length > 0) {
-      runEffects(Effects, calculationStore);
-    }
-
     if (sourceValueName && debouncedValue) {
-      calculationStore.setValue(sourceValueName, debouncedValue);
+      calculationStore.setValue(sourceValueName, debouncedValue).then(() => {
+        if (Effects && Effects.length > 0) {
+          runEffects(Effects, calculationStore);
+        }
+      });
     }
-  }, [debouncedValue, sourceValueName]);
+  }, [debouncedValue]);
 
   return (
     <AntInput

src/client/stores/CalculationStore/CalculationStore.ts

@@ -10,10 +10,12 @@ class CalculationStore {
 
   getValue = (sourceValueName: SourceValueNames) =>
     this.values[sourceValueName];
-  setValue = action((sourceValueName: SourceValueNames, newValue: any) => {
-    this.values[sourceValueName] = newValue;
-    // TODO: Run effect here
-  });
+  setValue = action(
+    async (sourceValueName: SourceValueNames, newValue: any) => {
+      this.values[sourceValueName] = newValue;
+      // TODO: Run effect here
+    }
+  );
 
   getStatus = (elementName: string) => this.statuses[elementName];
   setStatus = action((elementName: string, status: Status) => {