How to sync state/store with hotreload & separate actions file about unistore

[developit]

To separate actions, here's a little helper function:

function combineActions(...allActions) {
  return store => allActions.reduce( (combined, actions) => {
    for (let i in actions) {
      let action = actions[i];
      if (typeof action==='function') action = action(store);
      combined[i] = action;
    }
    return combined;
  }, {});
}

// usage:

import userActions from './userActions';
import UIActions from './UIActions';
import combineActions from '../util/combine-actions';

export default combineActions(userActions, UIActions);

... where userActions and UIActions are written as you described above.

[developit]

Here's code for HMR:

// adds memory backing to a unistore store instance:
function addMemory(store) {
  if (window.STATE) store.setState(window.STATE);
  store.subscribe( state => {
    window.STATE = state;
  });
}


// example usage:
let store = createStore( ... )
addMemory(store)

[jsu93]

@developit #81 (comment) didn't work

import userActions from './userActions';
import UIActions from './UIActions';
import combineActions from '../util/combine-actions';

class App extends Component {
	render() {
        console.log(this.props) // no action method there
    	return <div>ok</div>
    }
}
const allActions = combineActions(userActions, UIActions);
export default connect(state => state, allActions)(App)

Did I use the combineActions right with connect ?

[lukelindsey]

I split my actions in files but kept them as function(store) => object with the functions on there just like shown in store/actions.js in the OP. Not sure if that's the right way to do it, but I got combineActions working like this

function combineActions(...allActions) {
  return store => allActions.reduce( (combined, actions) => {
    let actionObj = actions;
    if (typeof actions ==='function') actionObj = actions(store);
    for (let i in actionObj) {
      combined[i] = actionObj[i];
    }
    return combined;
  }, {});
}

All my action files are following the function(store) style, so I always go in the if, so take the implementation with a grain of salt.

[jsu93]

@lukelindsey

Yes, I found it, 👍

function combineActions(...allActions) {
  return store => allActions.reduce((combined, actions) => {
    actions = actions(store);
    for (let i in actions) {
      if (combined[i]) throw new Error('Have a repeat action name: '+i)
      let action = actions[i];
      combined[i] = action;
    }
    return combined;
  }, {});
}

[azulkipli]

Thanks addMemory() work

I will try helper to separate actions later :)

[darve]

These are both super useful, much appreciated!

[JMSantos94]

If anyone has issues with devtools not displaying correctly the name of the actions after combining them with combineActions. I added this quick fix:

function combineActions(...allActions) {
    return store =>
        allActions.reduce((combined, actions) => {
            for (let i in actions) {
                let action = actions[i];
                let value = action.name;
                if (typeof action === 'function')
                    action = Object.defineProperty(action(store), 'name', {
                        value,
                    });
                combined[i] = action;
            }
            return combined;
        }, {});
}

My assumption is that: when action(store) is called, it returns a brand new function without a name. Using Object.defineProperty I set the name into this new function. 😄

[cmonteiro128]

@jsu93 's new version worked for me