TypeScript & Redux Toolkit: A Beginner’s Guide to State Management

Written by

learnmodernjavascript

in

In the ever-evolving world of web development, managing the state of your application can quickly become a complex challenge. As applications grow, keeping track of data, ensuring consistency, and handling updates efficiently becomes crucial. This is where state management libraries come into play, and Redux, with its ecosystem of tools, has become a popular choice. This tutorial will guide you through using Redux Toolkit with TypeScript, providing a clear and practical understanding of state management for your projects.

Why State Management Matters

Imagine building a simple e-commerce application. You need to manage the products in the cart, the user’s login status, and the current product being viewed. Without a robust state management solution, you might find yourself passing data through multiple components, dealing with prop drilling, and struggling to keep everything synchronized. This leads to code that is difficult to understand, debug, and maintain. State management libraries like Redux provide a centralized store for your application’s data, making it easier to manage and update the state in a predictable way.

Understanding Redux Toolkit

Redux Toolkit is the official, opinionated, batteries-included toolset for efficient Redux development. It simplifies many common Redux tasks and reduces boilerplate code, making it easier to get started and maintain your Redux applications. It includes utilities to simplify setting up a Redux store, defining reducers, and creating actions. By using Redux Toolkit with TypeScript, you gain the benefits of type safety, which helps catch errors early and improves code maintainability.

Setting Up Your Development Environment

Before we begin, ensure you have Node.js and npm (or yarn) installed on your system. You’ll also need a code editor (like VS Code) and a basic understanding of TypeScript. Let’s create a new project and install the necessary dependencies:

  1. Create a new project directory: mkdir typescript-redux-toolkit-tutorial
  2. Navigate into the directory: cd typescript-redux-toolkit-tutorial
  3. Initialize a new npm project: npm init -y
  4. Install Redux Toolkit and React Redux: npm install @reduxjs/toolkit react-redux
  5. Install TypeScript and related types: npm install typescript @types/react @types/react-dom --save-dev

Next, let’s set up the basic TypeScript configuration. Create a tsconfig.json file in the root of your project with the following content:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

This configuration sets up the TypeScript compiler to work with React and includes necessary libraries.

Creating a Simple Counter Application

Let’s build a simple counter application to demonstrate the core concepts of Redux Toolkit. This will involve creating actions, reducers, and a Redux store.

1. Defining Actions and Reducers

In Redux Toolkit, we use the createSlice function to define our reducers and actions in a single step. Create a new file named src/features/counter/counterSlice.ts and add the following code:

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

export interface CounterState {
  value: number;
}

const initialState: CounterState = {
  value: 0,
};

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction) => {
      state.value += action.payload;
    },
  },
});

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

export default counterSlice.reducer;

Explanation:

  • We import createSlice and PayloadAction from @reduxjs/toolkit.
  • We define an interface CounterState to represent the state of our counter.
  • We initialize the state with a value of 0.
  • We use createSlice to create a slice of the Redux store. We provide a name, the initialState, and reducers.
  • The reducers object contains functions that modify the state. We define increment, decrement, and incrementByAmount actions.
  • incrementByAmount uses PayloadAction to receive a payload (the amount to increment by).
  • Finally, we export the actions and the reducer.

2. Setting Up the Redux Store

Next, create a file named src/app/store.ts and set up the Redux store:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export type RootState = ReturnType;
export type AppDispatch = typeof store.dispatch;

Explanation:

  • We import configureStore from @reduxjs/toolkit.
  • We import the counterReducer we created earlier.
  • We use configureStore to create the store and pass in the reducer.
  • The reducer object maps the slice reducers to specific keys in the Redux store.
  • We export RootState and AppDispatch types for use in our components.

3. Creating a React Component

Now, let’s create a React component to interact with our counter. Create a file named src/components/Counter.tsx:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from '../features/counter/counterSlice';
import { RootState } from '../app/store';

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

  return (
    <div>
      <h2>Counter</h2>
      <p>Count: {count}</p>
      <button> dispatch(increment())}>Increment</button>
      <button> dispatch(decrement())}>Decrement</button>
      <button> dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
}

export default Counter;

Explanation:

  • We import useSelector and useDispatch from react-redux.
  • We import our action creators from counterSlice.ts.
  • We use useSelector to get the current count from the Redux store. We also specify the type of the state (RootState).
  • We use useDispatch to get the dispatch function.
  • We create buttons that dispatch the increment, decrement, and incrementByAmount actions.

4. Integrating the Counter Component

Finally, let’s integrate the counter component into your application. If you’re using Create React App, you can modify src/App.tsx to include the Counter component. If you are not using Create React App, you can create a simple React app file and render the Counter component. For example, if you are using Create React App modify src/App.tsx:

import React from 'react';
import { Provider } from 'react-redux';
import Counter from './components/Counter';
import { store } from './app/store';

function App() {
  return (
    
      <div>
        
      </div>
    
  );
}

export default App;

Explanation:

  • We import Provider from react-redux.
  • We import our Counter component and the store.
  • We wrap the Counter component with the Provider, passing in the store. This makes the Redux store available to all child components.

5. Running the Application

Start your application using npm start or yarn start. You should see the counter component with increment, decrement, and increment by amount buttons. Clicking these buttons will update the counter value in the UI.

Advanced Redux Toolkit Concepts

Now that you have a basic understanding of Redux Toolkit, let’s explore some more advanced concepts.

1. Asynchronous Actions with createAsyncThunk

createAsyncThunk is a utility provided by Redux Toolkit for handling asynchronous logic within your Redux application. This is particularly useful for making API calls, fetching data, and updating the state based on the results. Let’s create an example that fetches data from a fake API.

First, install the axios library:

npm install axios

Then, modify src/features/counter/counterSlice.ts:

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

export interface CounterState {
  value: number;
  status: 'idle' | 'loading' | 'succeeded' | 'failed';
  error: string | null;
}

const initialState: CounterState = {
  value: 0,
  status: 'idle',
  error: null,
};

export const fetchRandomNumber = createAsyncThunk(
  'counter/fetchRandomNumber',
  async () => {
    const response = await axios.get('https://www.random.org/integers/?num=1&min=1&max=100&col=1&base=10&format=plain&rnd=new');
    return response.data.number;
  }
);

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction) => {
      state.value += action.payload;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchRandomNumber.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchRandomNumber.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.value += action.payload;
      })
      .addCase(fetchRandomNumber.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message || 'Something went wrong';
      });
  },
});

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

export default counterSlice.reducer;

Explanation:

  • We import createAsyncThunk from @reduxjs/toolkit and axios.
  • We update the CounterState to include a status and error field to manage the asynchronous operation’s state.
  • We create an asynchronous thunk called fetchRandomNumber using createAsyncThunk.
  • The first argument to createAsyncThunk is a string that represents the action type prefix (e.g., ‘counter/fetchRandomNumber’). The second argument is an async function that performs the API call.
  • Inside the async function, we make a GET request to a random number API.
  • The extraReducers section handles the different states of the asynchronous operation (pending, fulfilled, rejected).
  • When the fetch is pending, we set the status to ‘loading’.
  • When the fetch is fulfilled, we update the value with the fetched number and set the status to ‘succeeded’.
  • When the fetch is rejected, we set the status to ‘failed’ and store the error message.

Modify src/components/Counter.tsx to incorporate the asynchronous action:

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount, fetchRandomNumber } from '../features/counter/counterSlice';
import { RootState } from '../app/store';

function Counter() {
  const count = useSelector((state: RootState) => state.counter.value);
  const status = useSelector((state: RootState) => state.counter.status);
  const error = useSelector((state: RootState) => state.counter.error);
  const dispatch = useDispatch();

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchRandomNumber());
    }
  }, [status, dispatch]);

  return (
    <div>
      <h2>Counter</h2>
      <p>Count: {count}</p>
      {status === 'loading' && <p>Loading...</p>}
      {status === 'failed' && <p>Error: {error}</p>}
      <button> dispatch(increment())}>Increment</button>
      <button> dispatch(decrement())}>Decrement</button>
      <button> dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
}

export default Counter;

Explanation:

  • We import the fetchRandomNumber action.
  • We use useSelector to get the status and error from the state.
  • We use the useEffect hook to dispatch fetchRandomNumber when the status is ‘idle’.
  • We display a loading message while the status is ‘loading’ and an error message if the status is ‘failed’.

2. Using Selectors for Optimized State Access

Selectors are functions that extract specific pieces of data from the Redux store’s state. Using selectors can help optimize performance by preventing unnecessary re-renders of components. Instead of directly accessing the state within your components, you can create selectors and use them with useSelector.

Create a file named src/features/counter/counterSelectors.ts:

import { RootState } from '../../app/store';

export const selectCount = (state: RootState) => state.counter.value;
export const selectStatus = (state: RootState) => state.counter.status;
export const selectError = (state: RootState) => state.counter.error;

Modify src/components/Counter.tsx to use the selectors:

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount, fetchRandomNumber } from '../features/counter/counterSlice';
import { selectCount, selectStatus, selectError } from '../features/counter/counterSelectors';

function Counter() {
  const count = useSelector(selectCount);
  const status = useSelector(selectStatus);
  const error = useSelector(selectError);
  const dispatch = useDispatch();

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchRandomNumber());
    }
  }, [status, dispatch]);

  return (
    <div>
      <h2>Counter</h2>
      <p>Count: {count}</p>
      {status === 'loading' && <p>Loading...</p>}
      {status === 'failed' && <p>Error: {error}</p>}
      <button> dispatch(increment())}>Increment</button>
      <button> dispatch(decrement())}>Decrement</button>
      <button> dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
}

export default Counter;

This refactoring improves the readability and maintainability of your components. If the structure of your state changes, you only need to update the selectors, rather than modifying multiple components.

3. Code Splitting and Lazy Loading

For larger applications, you can use code splitting and lazy loading to improve the initial loading time of your application. This involves splitting your reducers and actions into separate files and loading them only when needed.

Example: Let’s assume you have a src/features/anotherFeature folder with its own slice. You can lazily load this feature when a specific route is accessed.

First, create a new feature in src/features/anotherFeature/anotherFeatureSlice.ts:

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

export interface AnotherFeatureState {
  data: string;
}

const initialState: AnotherFeatureState = {
  data: 'initial data',
};

export const anotherFeatureSlice = createSlice({
  name: 'anotherFeature',
  initialState,
  reducers: {
    updateData: (state, action: PayloadAction) => {
      state.data = action.payload;
    },
  },
});

export const { updateData } = anotherFeatureSlice.actions;

export default anotherFeatureSlice.reducer;

Then, in your src/app/store.ts, we’ll conditionally add the reducer:

import { configureStore, Reducer, CombinedState } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import anotherFeatureReducer from '../features/anotherFeature/anotherFeatureSlice';

interface RootState {
  counter: ReturnType;
  anotherFeature?: ReturnType;
}

const createReducer = () => ({
  counter: counterReducer,
  // other reducers
});

export const store = configureStore({
  reducer: createReducer(),
});

export type AppDispatch = typeof store.dispatch;
export type RootState = CombinedState;

Note: the use of the anotherFeature? in the RootState definition. The reducer is conditionally added.

4. Persisting State with Local Storage

To persist the state across page reloads, you can use local storage. This allows you to save the state to the user’s browser, so it’s available even after they close and reopen the application.

First, install the redux-persist library:

npm install redux-persist

Then, modify src/app/store.ts:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import { persistReducer, persistStore } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, counterReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

export const persistor = persistStore(store);

export type RootState = ReturnType;
export type AppDispatch = typeof store.dispatch;

Explanation:

  • We import persistReducer and persistStore from redux-persist, and storage (which defaults to local storage).
  • We create a persistConfig object to configure how the state is persisted. We specify a key (a unique identifier) and the storage mechanism.
  • We wrap the counterReducer with persistReducer.
  • We pass the persisted reducer to configureStore.
  • We create a persistor object using persistStore.
  • We also need to disable the serializable check middleware, as the default middleware prevents non-serializable values (like functions) from being stored in local storage.

Modify src/App.tsx to wrap your application with the PersistGate component from redux-persist:

import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import Counter from './components/Counter';
import { store, persistor } from './app/store';

function App() {
  return (
    
      
        <div>
          
        </div>
      
    
  );
}

export default App;

Explanation:

  • We import PersistGate from redux-persist/integration/react.
  • We wrap the app with the PersistGate, providing the persistor.
  • loading={null} is the content to display while the state is being restored from local storage.

Common Mistakes and How to Fix Them

When working with Redux Toolkit and TypeScript, you might encounter some common pitfalls. Here’s how to avoid them:

1. Incorrect Type Definitions

One of the most common issues is incorrect type definitions. Ensure your state interfaces and action payloads are correctly typed. TypeScript will help you catch these errors early.

  • Problem: Using any instead of specific types.
  • Solution: Always define interfaces for your state and use specific types for action payloads.

2. Unnecessary Re-renders

Components re-rendering unnecessarily can impact performance. This often happens when components are not optimized.

  • Problem: Components re-rendering when the state hasn’t changed.
  • Solution: Use selectors to select only the necessary parts of the state. Use React.memo to memoize functional components and prevent re-renders if the props haven’t changed.

3. Improper Use of createAsyncThunk

Incorrectly using createAsyncThunk can lead to errors in your application’s state management.

  • Problem: Not handling the different states (pending, fulfilled, rejected) of asynchronous actions correctly.
  • Solution: Always include extraReducers in your slice to handle the different states of your asynchronous actions. Make sure to update the state accordingly (e.g., setting loading, error, and success flags).

4. Incorrect Store Configuration

Incorrectly configuring your store can prevent Redux from working as expected.

  • Problem: Not providing the correct reducers to the store or not configuring the middleware correctly.
  • Solution: Double-check your configureStore setup. Ensure you’ve included all necessary reducers and that any middleware is correctly configured. If you are using redux-persist, ensure you have correctly set up the persistence configuration.

Key Takeaways

  • Redux Toolkit simplifies Redux development by reducing boilerplate and providing useful utilities.
  • createSlice is used to define reducers and actions in a single step.
  • createAsyncThunk is used to handle asynchronous operations.
  • Selectors help optimize performance by preventing unnecessary re-renders.
  • TypeScript helps catch errors early and improves code maintainability.

FAQ

  1. What is the difference between Redux and Redux Toolkit?

    Redux is a state management library, while Redux Toolkit is a set of tools that simplifies Redux development. Redux Toolkit provides utilities to reduce boilerplate and make Redux easier to use.

  2. Why should I use Redux Toolkit with TypeScript?

    Using Redux Toolkit with TypeScript provides type safety, which helps catch errors early and improves code maintainability. It also allows for better autocompletion and code navigation.

  3. How do I handle asynchronous actions in Redux Toolkit?

    You can use createAsyncThunk to handle asynchronous actions. This utility simplifies the process of making API calls and updating the state based on the results.

  4. What are selectors and why are they useful?

    Selectors are functions that extract specific pieces of data from the Redux store’s state. They are useful for optimizing performance by preventing unnecessary re-renders of components. Instead of directly accessing the state within your components, you can create selectors and use them with useSelector.

  5. How can I persist the state across page reloads?

    You can use the redux-persist library to persist the state across page reloads. This allows you to save the state to the user’s browser, so it’s available even after they close and reopen the application.

Mastering state management is a crucial skill for any web developer. By combining Redux Toolkit with TypeScript, you equip yourself with powerful tools to build robust, maintainable, and scalable applications. As you continue to build more complex applications, the principles of state management, type safety, and efficient code organization will become invaluable. By understanding these concepts and practicing them regularly, you’ll be well-prepared to tackle any state management challenge that comes your way.

More posts