Combining Actions

[Jesse Cooper]

Here's a simple utility function I'm using that merges multiple action maps together. Thought this might be worthy of adding to the core library, unless I'm missing an better approach:

export function combineActions(...actionsArray) {
  return store => (
    actionsArray.reduce((acc, actions) => {
      actions = typeof actions === "function" ? actions(store) : actions
      return Object.assign(acc, actions)
    }, {})
  )
}

Usage:

import { userActions, todoActions } from '../actions'

@connect((state, props) => {
  return state
}, combineActions(userActions, todoActions))
export class App extends Component {
  ...
}

[Matheus Lima]

Hi @jetako

This surely can be useful. Can you add a PR with this?

[Matheus Lima]

@jetako there's a clean way to do this, without the need of a function. We can simply use the spread operator, like this:

import { connect } from "redux-zero/react";

import Component from "./Component";
import firstActions from "../../actions/firstActions";
import secondActions from "../../actions/secondActions";

export default connect(
  ({ params, moreParams }) => ({ params, moreParams }),
  (...actionParams) => ({
    ...firstActions(...actionParams),
    ...secondActions(...actionParams)
  })
)(Component);

I'm adding this to the DOCs.

[Leonardo Alberto Souza]

Hello, @matheusml

I've made a function to combine actions inspired on your example:

import { connect } from "redux-zero/react";

import Component from "./Component";
import firstActions from "../../actions/firstActions";
import secondActions from "../../actions/secondActions";

const combineActions = (...actions) => (...actionsParams) =>
  actions.reduce((acc, action) => ({ ...acc, ...action(...actionsParams) }), {});

export default connect(
  ({ params, moreParams }) => ({ params, moreParams }),
  combineActions(firstActions, secondActions)
)(Component);

I think that would be cool have a funciton like this on redux-zero/utils. What do you think?

[Matheus Lima]

Ok, @leobetosouza

Please add this.

[Jesse Cooper]

@leobetosouza, It looks like your version won't work with simple object actions, hence why my proposal checks for a "function" type.

A little tip: { ...acc, ...action(...actionsParams) } is doing more work than necessary. You are creating a new object in each loop, when you only need to assign to acc.
Object.assign(acc, action(...actionsParams)) is more efficient.

[Matheus Lima]

@leobetosouza before I can accept the PR, could you please take into account @jetako 's comments?

[Leonardo Alberto Souza]

@jetako

A little tip: { ...acc, ...action(...actionsParams) } is doing more work than necessary. You are creating a new object in each loop, when you only need to assign to acc.
Object.assign(acc, action(...actionsParams)) is more efficient.

It's proposital. I'm trying to work only with pure functions.

[Leonardo Alberto Souza]

It looks like your version won't work with simple object actions, hence why my proposal checks for a "function" type.

@jetako Yeah, I missed it. You're right. I haven't noticed that we have simple object actions. I will work on it tomorrow.

[Leonardo Alberto Souza]

@jetako @matheusml i've updated the PR (and tests) with actions object consideration :)

[Matheus Lima]

Thanks @leobetosouza