Fix store update on story changes

Author: usulpro

src/ChannelStore.js

@@ -66,7 +66,15 @@ export default class ChannelStore {
     const selectorId = id || GLOBAL;
     const selectedData = { ...(this.store[selectorId] || {}) };
     selectedData.init = data;
-    selectedData.over = selectedData.over || {};
+    /**
+     * Previous behavior didn't reset state on init event
+     * it caused that we didn't see changes after
+     * updating story parameters
+     * So i'm removing this, but if we need to make it optional
+     * this is how to revert it:
+     * electedData.over = selectedData.over || {};
+     */
+    selectedData.over = {};
     this.store[selectorId] = selectedData;
     this.selectorId = selectorId;
     this.subscriber();

src/decorator.js

@@ -3,9 +3,9 @@ import withChannel from './withChannel';
 
 import { getConfig } from './config';
 
-const DecoratorHOC = ({ actions, selectors, Component, ...props }) => (
-  <Component {...actions} {...selectors} {...props} />
-);
+const DecoratorHOC = ({ actions, selectors, Component, parameters, resetParameters, ...props }) => {
+  return <Component {...actions} {...selectors} {...props} />
+};
 
 export const createDecorator = (storeSelectors, createActions) => (
   Component,

src/withChannel.js

@@ -41,7 +41,7 @@ const withChannel = ({
 
         this.state = {
           data: initStateData,
-          selectors: isReceived ? this.prepareSelectors(initStateData) : {},
+          selectors: isReceived ? this.executeSelectors(initStateData) : {},
           isReceived,
         };
 
@@ -60,7 +60,7 @@ const withChannel = ({
 
       isPanel = this.props.panel || panel;
 
-      prepareSelectors = store => {
+      executeSelectors = store => {
         return Object.entries(storeSelectors)
           .map(([name, selector]) => ({
             [name]: tryToSelect(selector)(store),
@@ -93,14 +93,14 @@ const withChannel = ({
 
       componentWillUnmount() {
         this.debugLog('componentWillUnmount');
-      this.store.disconnect();
-    }
+        this.store.disconnect();
+      }
 
-    // debug = true;
-    debug = false;
+      // debug = true;
+      debug = false;
 
-    debugLog = message => {
-      if (!this.debug) {
+      debugLog = message => {
+        if (!this.debug) {
           return;
         }
         console.log(
@@ -114,16 +114,42 @@ const withChannel = ({
         this.setState({
           data,
           isReceived: true,
-          selectors: this.prepareSelectors(data),
+          selectors: this.executeSelectors(data),
         });
       };
 
+      resetParameters = parameters => {
+        const initStateData = {
+          ...initData,
+          ...this.props.initData,
+          ...parameters,
+        };
+        this.setState({
+          data: initStateData,
+          selectors: this.state.isReceived ? this.executeSelectors(initStateData) : {},
+        });
+        this.store.sendInit(initStateData);
+      }
+
       render() {
         const { pointName, initData, active, onData, ...props } = this.props;
-        const { data, isReceived, selectors } = this.state;
+        const { data, isReceived } = this.state;
 
         if (active === false) return null;
 
+        const initStateData = {
+            ...initData,
+            ...parameters,
+            ...data,
+          };
+
+        let selectors;
+        try {
+          selectors = this.executeSelectors(initStateData)
+        } catch (err) {
+          selectors = this.state.selectors;
+        }
+
         return (
           <WrappedComponent
             data={data}
@@ -134,6 +160,7 @@ const withChannel = ({
             selectors={selectors}
             actions={this.actions}
             isFirstDataReceived={isReceived}
+            resetParameters={this.resetParameters}
             {...props}
           />
         );