Installing Redux Toolkit with TypeScript

Redux Toolkit is a set of tools that simplifies the process of writing Redux logic in a more efficient and less error-prone way. TypeScript, on the other hand, adds static typing to JavaScript, which can catch errors at compile-time and make the codebase more maintainable. Combining Redux Toolkit with TypeScript provides a powerful solution for managing the state in large-scale React applications. This blog post will guide you through the process of installing Redux Toolkit with TypeScript and explain how to use them effectively.

Table of Contents#

  1. Fundamental Concepts
  2. Installation Process
  3. Usage Methods
  4. Common Practices
  5. Best Practices
  6. Conclusion
  7. References

Fundamental Concepts#

Redux Toolkit#

Redux Toolkit is an official package that simplifies the process of creating Redux stores, reducers, and actions. It includes functions like createSlice, which combines the creation of actions and reducers in a single function.

TypeScript#

TypeScript is a superset of JavaScript that adds static types. When used with Redux Toolkit, it can provide better type checking for actions, reducers, and state, making the code more robust and easier to understand.

State Management#

In Redux, the state of the application is stored in a single object called the store. Reducers are pure functions that take the current state and an action, and return a new state. Actions are plain objects that describe what happened in the application.

Installation Process#

Prerequisites#

  • Node.js and npm (Node Package Manager) should be installed on your machine.

Step 1: Create a new React project with TypeScript#

If you haven't already, create a new React project with TypeScript using create - react - app:

npx create-react-app my-app --template typescript
cd my-app

Step 2: Install Redux Toolkit and React-Redux#

Install @reduxjs/toolkit and react-redux packages using npm or yarn:

npm install @reduxjs/toolkit react-redux

Step 3: Create a basic Redux store with TypeScript#

First, create a new file, for example, store.ts in the src directory of your project.

import { configureStore } from '@reduxjs/toolkit';
 
// Define an initial state type
interface CounterState {
    value: number;
}
 
// Create a slice
import { createSlice } from '@reduxjs/toolkit';
 
const counterSlice = createSlice({
    name: 'counter',
    initialState: { value: 0 } as CounterState,
    reducers: {
        increment: (state) => {
            state.value += 1;
        },
        decrement: (state) => {
            state.value -= 1;
        },
    },
});
 
// Export the actions
export const { increment, decrement } = counterSlice.actions;
 
// Create the store
const store = configureStore({
    reducer: {
        counter: counterSlice.reducer,
    },
});
 
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
 
export default store;

Step 4: Provide the store to the React application#

In your index.tsx file, import the store and use the Provider component from react - redux to make the store available to the entire application.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
 
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

Usage Methods#

Using actions and selectors in React components#

In a React component, you can use the useDispatch and useSelector hooks from react - redux to dispatch actions and access the state.

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from './store';
import { RootState } from './store';
 
const Counter: React.FC = () => {
    const dispatch = useDispatch();
    const count = useSelector((state: RootState) => state.counter.value);
 
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => dispatch(increment())}>Increment</button>
            <button onClick={() => dispatch(decrement())}>Decrement</button>
        </div>
    );
};
 
export default Counter;

Common Practices#

Organizing slices#

It's a good practice to organize your slices in separate files. For example, if you have multiple features in your application, each feature can have its own slice file.

// features/counterSlice.ts
import { createSlice } from '@reduxjs/toolkit';
 
interface CounterState {
    value: number;
}
 
const counterSlice = createSlice({
    name: 'counter',
    initialState: { value: 0 } as CounterState,
    reducers: {
        increment: (state) => {
            state.value += 1;
        },
        decrement: (state) => {
            state.value -= 1;
        },
    },
});
 
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Then, in your store.ts file, you can combine these slices:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counterSlice';
 
const store = configureStore({
    reducer: {
        counter: counterReducer,
    },
});
 
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
 
export default store;

Using thunks for asynchronous operations#

Redux Toolkit supports thunks out-of-the-box. Thunks are used for handling asynchronous operations such as API calls.

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';
 
// Define an async thunk
export const fetchData = createAsyncThunk('data/fetchData', async () => {
    const response = await axios.get('https://api.example.com/data');
    return response.data;
});
 
interface DataState {
    data: any;
    loading: boolean;
    error: string | null;
}
 
const dataSlice = createSlice({
    name: 'data',
    initialState: { data: null, loading: false, error: null } as DataState,
    reducers: {},
    extraReducers: (builder) => {
        builder
          .addCase(fetchData.pending, (state) => {
                state.loading = true;
                state.error = null;
            })
          .addCase(fetchData.fulfilled, (state, action) => {
                state.loading = false;
                state.data = action.payload;
            })
          .addCase(fetchData.rejected, (state, action) => {
                state.loading = false;
                state.error = action.error.message || 'An error occurred';
            });
    },
});
 
export default dataSlice.reducer;

Best Practices#

Type safety#

  • Action types: When defining actions, make sure to use proper types. For example, when using createSlice, TypeScript can infer the types of actions automatically.
  • State types: Define clear types for your state objects. This helps in catching type-related errors early and makes the code more self-documenting.

Code splitting#

Split your reducers and slices into smaller, more manageable files. This improves code readability and maintainability, especially in large projects.

Error handling#

  • In asynchronous operations, handle errors gracefully. In the example of the fetchData thunk above, we set an error message in the state when the API call fails. This way, the UI can display appropriate error messages to the user.

Testing#

  • Write unit tests for your reducers, actions, and thunks. Redux Toolkit provides easy-to-use testing utilities. For example, you can use @testing-library/react and @testing-library/jest-dom to test React components that use Redux.

Conclusion#

Installing and using Redux Toolkit with TypeScript can significantly enhance the development experience when managing the state of your React applications. By following the installation steps, understanding the fundamental concepts, and adopting common and best practices, you can build scalable, maintainable, and robust applications. The combination of Redux Toolkit's simplicity and TypeScript's type-checking capabilities provides a powerful solution for state management in modern web development.

References#

2025-10