Typescript + React + Redux Toolkit Snippets

These are a selection of snippets that I use keeping in mind modern trends with React development. Relevant snippets are meant to be used only with Typescript, functional components, and hooks.

These snippets are also for Redux Toolkit specifically.

Snippets

Expanded code

rfc - React Functional Component (no props)

const |: React.FC = () => {
  return <div>|</div>;
};

export default |;

rfcp - React Functional Component with Props

type Props = {
  |
};

const |: React.FC<Props> = (props) => {
  const { | } = props;

  return <div>|</div>;
};

export default |;

rus - React useState

Note: these useState snippets will auto-camelCase the set__ method after pressing Tab.

const [|, set|] = useState<|>(|);

rusb - React useState boolean

const [|, set|] = useState<boolean>(false);

russ - React useState string

const [|, set|] = useState<string>("");

rusa - React useState Array

const [|, set|] = useState<Array<|>>([]);

rusn - React useState number

const [|, set|] = useState<number>(0);

rue - React useEffect

useEffect(() => {
  |
}, [|]);

rur - React useRef

Note: The HTMLDivElement is default but the snippet will highlight it to be changed freely.

const |Ref = useRef<HTMLDivElement>(null);

ruc - React useContext

const | = useContext(|Context);

rcc - React createContext

const |Context = createContext<|>(|);

rfcroutes - Functional Component with Routes

import { BrowserRouter, Route, Routes } from "react-router-dom";

const |: React.FC = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<| />} path="/|" />
      </Routes>
    </BrowserRouter>
  );
};

export default |;

exd - export default

export default |;

ext - export type

export type | = {
  |
};

exi - export interface

export interface | {
  |
}

exe - export enum

export enum | {
  |,
  |
}

exes - export enum as string

export enum | {
  | = "|",
  | = "|",
  | = "|",
  | = "|"
}

rtkslice - Redux Toolkit Slice

Note: This snippet is complex. The name entered for the type __State is used in various places in the Slice and is auto-cased. The first property in that type will be turned into the first reducer action as well.

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

type |State = {
  |: |;
};

const initialState: |State = {
  |: |
};

export const | = createSlice({
  name: "|",
  initialState,
  reducers: {
    set|: (state, action: PayloadAction<|>) => {
      state.| = action.payload;
    },
  }
});

export const { reducer: |Reducer } = |;
export const { set| } = |.actions;

rtkaction - Redux Toolkit Slice action

|: (state, action: PayloadAction<|>) => {
  state.|
}

rtkuad - Redux Toolkit useAppDispatch

const dispatch = useAppDispatch();

rtkuas - Redux Toolkit useAppSelector

const | = useAppSelector((state: RootState) => state.|);

imp-rtkhooks - Redux Toolkit import dispatch and selector hooks

Note: The value of @/store/hooks is what I use and is default here, but the snippet will highlight it for you to change freely.

import { useAppDispatch, useAppSelector } from "@/store/hooks";

rtkthunk,rtkasync - Redux Toolkit basic createAsyncThunk

export const | = createAsyncThunk<void, void>(
  "|",
  async (_, { dispatch }) => {
    |
  }
);

rtkthunk-state,rtkasync-state - Redux Toolkit createAsyncThunk with getState

export const | = createAsyncThunk<void, void, { state: RootState }>(
  "|",
  async (_, { dispatch, getState }) => {
    const state = getState();

    |
  }
);

rtkthunk-custom,rtkasync-custom - Redux Toolkit custom params createAsyncThunk

export const | = createAsyncThunk<ReturnType, ParamType>(
  "|",
  async (|, { dispatch }) => {
    |
  }
);

rtkthunk-custom-state,rtkasync-custom-state - Redux Toolkit custom params createAsyncThunk with getState

export const | = createAsyncThunk<ReturnType, ParamType, { state: RootState }>(
  "|",
  async (|, { dispatch, getState }) => {
    const state = getState();

    |
  }
);

rtk-extred-thunk - Redux Toolkit extraReducers for async thunk

extraReducers: (builder) => {
  builder.addCase(|.pending, (state, action) => {
    // Pending action
  });
  builder.addCase(|.rejected, (state, action) => {
    // Rejected action
  });
  builder.addCase(|.fulfilled, (state, action) => {
    // Fulfilled action
  });
}

rtk-extred-action - Redux Toolkit extraReducers for separate slice action

extraReducers: (builder) => {
  builder.addCase(|, (state, action) => {
    |
  });
}