Generate action hooks from createSlice

[dawidvdh]

Hey everyone,

I have been using redux for quite some time now and more recently redux toolkit and I really appreciate the auto generated hooks and I was wondering if we could not implement this same functionality for action creators.

I have implemented a minimal example here, I am curious to hear if this is considered a really bad idea or if this was ever considered to be in the RTK library and if so what the decision was around excluding this type of behaviour?

Here is the code snippets in case anyone wants a quicker read:

// generate-hooks.ts
import {useDispatch} from 'react-redux'
import {bindActionCreators, Slice as RTKSlice} from '@reduxjs/toolkit'

type WrappedSliceMethods<Slice extends RTKSlice> = {
  [ActionName in keyof Slice['actions']]: (
    ...args: Parameters<Slice['actions'][ActionName]>
  ) => void
}

export const useSliceHook = <Slice extends RTKSlice>(
  slice: Slice
): WrappedSliceMethods<Slice> => {
  const dispatch = useDispatch();
  const { actions } = slice;

  return useMemo(() => {
    return Object.keys(actions).reduce((acc, k) => {
      const key = k as keyof typeof actions;

      if (actions[key]) {
        return {
          ...acc,
          [key]: bindActionCreators(actions[key], dispatch),
        };
      }

      return acc;
    }, {} as WrappedSliceMethods<Slice>);
  }, [actions, dispatch]);
};

The above is to generate the hooks and is used like so:

// counterSlice.ts
export const counterSlice = createSlice({
// ... shortened for illustrative purposes
reducers: {
increment: () => {},
decrement: () => {},
incrementByAmount: () => {},
}
// ...
})

export const useCounter = () => useSliceHook(counterSlice)

and finally used in a react component in the following way:

// Counter.tsx
// .... shortened for illustrative purposes
export function Counter() {
  const {decrement} = useCounter()
  
  return (
  <button
          className={styles.button}
          aria-label="Decrement value"
          onClick={() => decrement()}
        >
          -
    </button>
  )
}

Really looking forward to hear any feedback around this!

[EskiMojo14]

There's a useActions recipe in the React Redux docs. It was removed from v7.1.0-alpha.4 based on Dan Abramov's suggestion.

Additionally, calling a hook per action needed seems like a lot of inconvenience vs calling useDispatch once and importing the action creators.

[dawidvdh]

@EskiMojo14 interesting that I did not know, and you are absolutely correct with the fact that it's far more inconvenient I realized it myself shortly after posting, and I have updated the solution with what I was actually trying to get at.

Curious to hear your thoughts on it as I feel its a little different from the useActions reference you posted as all the actions are available on the slice without having to manually import and bind them.

[dawidvdh]

I guess the danger here is within the lifecycle method dependencies, so if we have:

// Counter.tsx
// ...

  const { increment, decrement, incrementByAmount } = useCounterActions();

  useEffect(() => {
    increment();
    // should have dispatch as a dep
  }, [increment]);

It now takes the bound function as a dependency instead of dispatch, but since the actions are memoized it should be okay?