Redux Fundamentals

Hooking It Up With React – Binding Actions

Redux Fundamentals Videos ▶️ 

Binding Actions

We saw in our introduction that we can create functions that implicitely know about—or are bound to—dispatch.

At a simple version of this might look as follows:

const actions = bindActionCreators({ increment, decrement, set }, dispatch);

And now we could put them into the component.

<button onClick={() => actions.increment()}>Increment</button>
<button onClick={() => actions.set(0)}>Reset</button>
<button onClick={() => actions.decrement()}>Decrement</button>

You could even create a hook if you wanted to do this on the regular.

In a new file called set-actions.js:

import { bindActionCreators } from "redux";
import { useDispatch } from "react-redux";
import { useMemo } from "react";

export function useActions(actions) {
  const dispatch = useDispatch();
  return useMemo(() => {
    return bindActionCreators(actions, dispatch);
  }, [actions, dispatch]);
}

And now we can use this whenever.

const actions = useActions({ increment, decrement, set });

A similar function was originally included in an alpha of React Redux, but was ultimately removed for reasons.