rtk-slice-helper

Cut your RTK slice code in half

The Problem

Whenever you want to use your slice in a component, you have to import and use a lot of boilerplate code

• import useDispatch to dispatch reducer actions
• import useSelector to select from the store
• import RootState to safely type the state when selecting
• instantiating useDispatch and useSelector
• wrapping every reducer action with dispatch

import { RootState } from "store";
import { useSelector, useDispatch } from "react-redux";
import { decrement, increment, incrementByAmount } from "counterSlice";

export const Counter = () => {
  const dispatch = useDispatch();
  const counter = useSelector((state: RootState) => state.counter.value);

  return (
    <>
      <div>{counter}</div>
      <button onClick={() => dispatch(increment())}>
        Increment the counter!
      </button>
      <button onClick={() => dispatch(decrement())}>
        Decrement the counter!
      </button>
      <button onClick={() => dispatch(incrementByAmount(10))}>
        Increment by 10!
      </button>
    </>
  );
};

The Solution

Simply pass your slice to useSliceHelper and it returns all the needed data and properties for you!

The properties also all have dispatch() built into them:

import { counterSlice } from './counterSlice'
import { useSliceHelper } from '../useSliceHelper'

export const Counter = () => {
  const {
    counter: { value },
    increment, decrement, incrementByAmount
  } = useSliceHelper(counterSlice)

  return (
    <>
      <div>{counter}</div>
      <button onClick={increment)}>
        Increment the counter!
      </button>
      <button onClick={decrement)}>
        Decrement the counter!
      </button>
      <button onClick={() => incrementByAmount(10)}>
        Increment by 10!
      </button>
    </>
  );
};

What gets returned?

An object with the following keys and values:

• [The name of the slice]: [the current state of that slice]
• ...[every reducer method of that slice with dispatch built in]:

  const {
    counter: { value }, // the name of the slice along with each state property for that slice
    increment, decrement, incrementByAmount // every reducer method for that slice. No need to dispatch!
  } = useSliceHelper(counterSlice)