Manage Store via reducers

Author: usulpro

dev/register.js

@@ -17,23 +17,26 @@ const AddonPanel = ({
   rect,
   Layout,
   Block,
+  selectInd
 }) => {
   return (
     <Layout style={{ padding: 0 }}>
       <Block style={{ ...blockStyle, minWidth: 50 }} size={200}>
         kind: {kind}
         <br />
-        <button onClick={() => setData({ panel: 'bar' })}>setData</button>
+        <button onClick={() => selectInd(3)}>setData</button>
       </Block>
       {/* <Block style={blockStyle}>
         <small>{JSON.stringify(api.getCurrentStoryData())}</small>
       </Block> */}
-      <Block style={blockStyle} >
+      <Block style={blockStyle}>
         channel store data: <br /> ({JSON.stringify(data)})
       </Block>
       {/* <Block style={blockStyle}>data ({JSON.stringify(rect, null, 2)})</Block> */}
     </Layout>
   );
 };
 
-register(AddonPanel);
+register(({ global, local }) => ({
+  selectInd: global((store, ind) => ({ store, currentTheme: ind })),
+}))(AddonPanel);

src/ChannelStore.js

@@ -84,7 +84,7 @@ export default class ChannelStore {
       selectedData.over = data;
       this.selectorId = selectorId;
     } else {
-      this.store = updData;
+      this.store = data;
     }
 
     this.subscriber();
@@ -93,8 +93,8 @@ export default class ChannelStore {
   selectData = () => {
     const id = this.isPanel ? this.selectorId : this.id;
 
-    const { global } = this.store;
-    const local = this.store[id];
+    const { global = {} } = this.store;
+    const local = this.store[id] || {};
 
     const finalData = {
       ...global.init,

src/register.js

@@ -89,6 +89,7 @@ class PanelHOC extends React.Component {
           return (
             <div ref={ref} name="addon-holder" style={{ height: '100%' }}>
               <Panel
+                {...this.props.actions}
                 api={api}
                 active={active}
                 data={data}
@@ -110,7 +111,7 @@ class PanelHOC extends React.Component {
   }
 }
 
-export const register = (Panel, { type = addonTypes.PANEL, initData } = {}) => {
+export const register = createActions => (Panel, { type = addonTypes.PANEL, initData } = {}) => {
   const config = getConfig();
   const {
     EVENT_ID_INIT,
@@ -128,6 +129,7 @@ export const register = (Panel, { type = addonTypes.PANEL, initData } = {}) => {
     ADDON_ID,
     initData,
     panel: true,
+    createActions,
   })(PanelHOC);
 
   addons.register(ADDON_ID, api => {

src/withChannel.js

@@ -14,6 +14,7 @@ const withChannel = ({
   panel,
   parameters,
   storyId,
+  createActions = {},
 }) => WrappedComponent =>
   class extends React.Component {
     static displayName = `WithChannel(${getDisplayName(WrappedComponent)})`;
@@ -37,6 +38,22 @@ const withChannel = ({
       storyId,
     });
 
+
+    prepareActions = () => {
+      const {
+        createGlobalAction: global,
+        createLocalAction: local,
+      } = this.store;
+      const isFn = typeof createActions === 'function';
+      const actions = isFn
+        ? createActions({ global, local })
+        : Object.entries(createActions)
+            .map(([name, reducer]) => ({ [name]: global(reducer) }))
+            .reduce((acc, cur) => ({ ...acc, ...cur }), {});
+      return actions;
+    };
+    actions = this.prepareActions();
+
     componentDidMount() {
       this.debugLog('componentDidMount');
       this.store.onData(this.onData);
@@ -81,6 +98,7 @@ const withChannel = ({
           store={this.store}
           active={active}
           parameters={parameters}
+          actions = {this.actions}
           {...props}
         />
       );