Bind Action Creators

Let's get back to Redux itself for a moment. So far, we've made functions that create actions (a.k.a. action creators) and we've passed them to dispatch.

Well, what if we wanted to wrap that whole process into one nice neat package.

const dispatchIncrement = () => store.dispatch(increment());
const dispatchAdd = (number) => store.dispatch(add(number));

dispatchIncrement();
dispatchAdd();

This could be tedious. What else could we do? We could use compose.

const dispatchIncrement = compose(store.dispatch, increment);
const dispatchAdd = compose(store.dispatch, add);

And if we wanted to a whole bunch, we could get fancy.

const [dispatchIncrement, dispatchAdd] = [increment, add].map((fn) =>
  compose(store.dispatch, fn)
);

But, like, React likes its props in objects and then we'd have to get all fussy with Object.keys or Object.entries. I'm very lazy. We should just have an helper for that. Oh, wait, we do.

const actions = bindActionCreators(
  {
    increment,
    add,
  },
  store.dispatch
);

actions.increment();

console.log(store.getState());

There is no rule saying that you have to use bindActionCreators. It's there to help you.