react/reduxt toolkit sample app - quick start

Setting up react/redux for an application can be quite interesting experience. 

Begin by setting up installing the libraries and the setup hook and store. 

Ensure your package.json has the following libraries

  "dependencies": {

    "react": "^18.2.0",

    "react-dom": "^18.2.0",

    "react-redux": "^9.1.0"

"@reduxjs/toolkit": "^2.1.0",

  },

hook.ts (this file pretty much the same.

import { useDispatch, useSelector } from "react-redux";

import type { AppDispatch, RootState } from "./store";

// Use throughout your app instead of plain `useDispatch` and `useSelector`

export const useAppDispatch = useDispatch.withTypes<AppDispatch>();

export const useAppSelector = useSelector.withTypes<RootState>();

then setup your counterslice.ts

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

import { RootState, AppThunk } from "../../app/store";

export interface CounterState {

  value: number;

  status: "idle" | "loading" | "failed";

}

const initialState: CounterState = {

  value: 0,

  status: "idle",

};

export const counterSlice = createSlice({

  name: "counter",

  initialState,

  // The `reducers` field lets us define reducers and generate associated actions

  reducers: {

    increment: (state) => {

      // Redux Toolkit allows us to write "mutating" logic in reducers. It

      // doesn't actually mutate the state because it uses the Immer library,

      // which detects changes to a "draft state" and produces a brand new

      // immutable state based off those changes

      state.value += 1;

    },

    decrement: (state) => {

      state.value -= 1;

    },

    // Use the PayloadAction type to declare the contents of `action.payload`

    incrementByAmount: (state, action: PayloadAction<number>) => {

      state.value += action.payload;

    },

  },

});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// The function below is called a selector and allows us to select a value from

// the state. Selectors can also be defined inline where they're used instead of

// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`

export const selectCount = (state: RootState) => state.counter.value;

export default counterSlice.reducer;

store.ts

import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";

import counterReducer from "./components/counter/counterslice";

export const store = configureStore({

  reducer: {

    counter: counterReducer,

  },

});

export type AppDispatch = typeof store.dispatch;

export type RootState = ReturnType<typeof store.getState>;

export type AppThunk<ReturnType = void> = ThunkAction<

  ReturnType,

  RootState,

  unknown,

  Action<string>

>;

In the counter.tsx

import React, { useState } from "react";

import { useAppSelector, useAppDispatch } from "../../hooks";

import styles from "./counter.module.css";

import {

  decrement,

  increment,

  incrementByAmount,

  //incrementAsync,

  //incrementIfOdd,

  selectCount,

} from "./counterslice";

export function Counter() {

  const count = useAppSelector(selectCount);

  const dispatch = useAppDispatch();

  const [incrementAmount, setIncrementAmount] = useState("2");

  const incrementValue = Number(incrementAmount) || 0;

  return (

    <div>

      <div className={styles.row}>

        <button

          className={styles.button}

          aria-label="Decrement value"

          onClick={() => dispatch(decrement())}

        >

          -

        </button>

        <span className={styles.value}>{count}</span>

        <button

          className={styles.button}

          aria-label="Increment value"

          onClick={() => dispatch(increment())}

        >

          +

        </button>

      </div>

      <div className={styles.row}>

        <input

          className={styles.textbox}

          aria-label="Set increment amount"

          value={incrementAmount}

          onChange={(e) => setIncrementAmount(e.target.value)}

        />

        <button

          className={styles.button}

          onClick={() => dispatch(incrementByAmount(incrementValue))}

        >

          Add Amount

        </button>

      </div>

    </div>

  );

}

App.tsx

import "./styles.css";

import { Counter } from "./components/counter/counter";

export default function App() {

  return (

    <div className="App">

      <h1>Hello CodeSandbox</h1>

      <h2>Start editing to see some magic happen!</h2>

      <Counter />

    </div>

  );

}

And finally index.tsx

import React from "react";

import { render } from "react-dom";

import { Provider } from "react-redux";

import { store } from "./store";

import App from "./App";

import { createRoot } from "react-dom/client";

const container = document.getElementById("root")!;

const root = createRoot(container);

root.render(

  <React.StrictMode>

    <Provider store={store}>

      <App />

    </Provider>

  </React.StrictMode>

);

The code can be obtained here.

https://codesandbox.io/p/sandbox/react-typescript-xlpsg