Fix local storage mutations

Author: usulpro

dev/register.js

@@ -17,14 +17,19 @@ const AddonPanel = ({
   rect,
   Layout,
   Block,
-  selectInd
+  nextInd,
+  update,
 }) => {
   return (
     <Layout style={{ padding: 0 }}>
       <Block style={{ ...blockStyle, minWidth: 50 }} size={200}>
         kind: {kind}
         <br />
-        <button onClick={() => selectInd(3)}>setData</button>
+        <button onClick={() => nextInd()}>setData</button>
+        <br />
+        <button onClick={() => update({ themes: ['T1', 'T2', 'T3'] })}>
+          Update
+        </button>
       </Block>
       {/* <Block style={blockStyle}>
         <small>{JSON.stringify(api.getCurrentStoryData())}</small>
@@ -38,5 +43,13 @@ const AddonPanel = ({
 };
 
 register(({ global, local }) => ({
-  selectInd: global((store, ind) => ({ store, currentTheme: ind })),
+  nextInd: local((store) => ({
+    currentTheme: store.currentTheme + 1,
+  })),
+  update: global(),
 }))(AddonPanel);
+
+// register({
+//   nextInd: (store) => ({ ...store, currentTheme: store.currentTheme + 1 }),
+//   update: null, // <-- it works :)
+// })(AddonPanel);

dev/withAdk.js

@@ -17,5 +17,5 @@ const DecoratorUI = ({ context, getStory, data, parameters }) => (
   </div>
 );
 
-export const withAdk = createDecorator(DecoratorUI, {isGlobal: true});
+export const withAdk = createDecorator(DecoratorUI, {isGlobal: false});
 export const adkParams = setParameters()

src/ChannelStore.js

@@ -62,9 +62,11 @@ export default class ChannelStore {
   onInitChannel = initData => {
     const { data, id } = initData;
     const selectorId = id || GLOBAL;
-    const selectedData = this.store[selectorId];
+    console.log('TCL: ChannelStore -> onConnectedFn -> selectorId', selectorId);
+    const selectedData = { ...(this.store[selectorId] || {}) };
     selectedData.init = data;
     selectedData.over = selectedData.over || {};
+    this.store[selectorId] = selectedData;
     this.selectorId = selectorId;
     this.subscriber();
     this.send();
@@ -120,20 +122,31 @@ export default class ChannelStore {
     ...payload,
   });
 
-  _createAction = (reducer = this.defaultReducer, subId) => {
+  _createAction = (reducer, getSubId) => {
     return payload => {
+      const subId = getSubId();
       const subData = this.store[subId];
-      subData.over = reducer(global.over, payload);
+      console.log('TCL: ChannelStore -> _createAction -> subId', subId);
+      console.log('TCL: ChannelStore -> _createAction -> subData', subData);
+      const current = {
+        ...subData.init,
+        ...subData.over,
+      };
+      const over = (reducer || this.defaultReducer)(current, payload);
+      subData.over = over;
+
       this.send();
       this.subscriber();
     };
   };
 
-  createGlobalAction = reducer => this._createAction(reducer, GLOBAL);
+  createGlobalAction = reducer => this._createAction(reducer, () => GLOBAL);
   createLocalAction = reducer =>
-    this._createAction(reducer, this.selectedId || this.id);
+    this._createAction(reducer, () => this.selectorId || this.id);
 
   sendInit = data => {
+    console.log('TCL: ChannelStore -> onConnectedFn -> id', this.id);
+
     this.init(data);
   };
 

src/decorator.js

@@ -3,7 +3,7 @@ import withChannel from './withChannel';
 
 import { getConfig } from './config';
 
-export const createDecorator = (Component, { isGlobal } = {}) => initData => (getStory, context) => {
+export const createDecorator = (Component, { isGlobal = true } = {}) => initData => (getStory, context) => {
   const {
     ADDON_ID,
     EVENT_ID_INIT,