 package is intended to be the standard way to write Redux logic. It simplifies the store creation and decreases the amount of boilerplate code.

Let's rewrite the application we wrote in 

First of all, we need to create a new app. We can use Create React App with TypeScript template and then add Redux Toolkit or we can use a 

 that already includes everything we need.

npx create-react-app redux-toolkit-app --template redux-typescript
# or
yarn create react-app redux-toolkit-app --template redux-typescript

Now, if you look in the redux-toolkit-app directory you will see not only App.tsx but also 2 new directories:

 directory, we won't need anything inside of it.

Redux Toolkit introduces a new concept called a 

.  It is an object that contains a reducer function as a field named 

, and action creators inside an object called 

Basically, a slice is a store part responsible for a single feature. We may think of it as a set of actions, a reducer, and an initial state.

Slices allow us to write less code and keep feature-related code closer thus increasing 

For our first slice, we're going to use a 

 function. Let's start with re-creating typings for our store:

// features/todos/todosSlice.ts

// We can safely reuse
// types created earlier:
type TodoId = string;

type Todo = {
  id: TodoId;
  title: string;
  completed: boolean;
};

type TodosState = {
  list: Todo[];
};

// features/todos/todosSlice.ts

const initialState: TodosState = {
  list: [],
};

// features/todos/todosSlice.ts

export const todosSlice = createSlice({
  // A name, used in action types:
  name: "todos",
  
  // The initial state:
  initialState,
  
  // An object of "case reducers". 
  // Key names will be used to generate actions:
  reducers: {
    addTodo(
      // Arguments of actions are basically the same.
      // The first one is the state,
      // the second one is an action.
      state: TodosState, 
       
      // `PayloadAction` is a generic-type
      // that allows you to specify an action
      // with a typped payload.
      // In our case, this payload is of `Todo` type:
      action: PayloadAction<Todo>
    ) {
      // RTK 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.list.push(action.payload);
    },
    toggleTodo(
      // You can skip typing the state,
      // it will be inferred from the `initialState`.
      // I prefer to explicitly type everything I can
      // but this is not obligatory.
      // For example, this will work as well:
      state, 
      action: PayloadAction<TodoId>
    ) {
      const index = state.list.findIndex(
        ({ id }) => id === action.payload);
      
      if (index) {
        state.list[index].completed = !state.list[index].completed;
      }
    },
  },
});

 fields. Let's export everything they have from the module:

// features/todos/todosSlice.ts

// Export all of the actions:
export const { addTodo, toggleTodo } = todosSlice.actions;

// It is a convention to export reducer as a default export:
export default todosSlice.reducer;

To use the state in our components, we need to create a state selector. For that, we need to define a 

// app/store.ts

import { configureStore } from "@reduxjs/toolkit";
// Import our reducer from the sluce:
import todosReducer from "../features/todos/todosSlice";

// Use `configureStore` function to create the store:
export const store = configureStore({
  reducer: {
    // Specify our reducer in the reducers object:
    todos: todosReducer,
  },
});

// Define the `RootState` as the return type:
export type RootState = ReturnType<typeof store.getState>;

// features/todos/todosSlice.ts

// ...
// Import the `RootState` type:
import { RootState } from "../../app/store";

// ...

// Create and export the selector:
export const selectTodos = (state: RootState) => state.todos.list;

The code of our component will be almost the same, except for imports and selector usage. Let's review it:

// features/todos/AddTodo.tsx

import React, { useState } from "react";
import { useDispatch } from "react-redux";
// Import the action from slice:
import { addTodo } from "./todosSlice";

// The rest of the code stays the same:
export const AddTodo = () => {
  const [title, setTitle] = useState("");
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    setTitle("");

    dispatch(
      addTodo({
        id: Date.now().toString(),
        completed: false,
        title,
      })
    );
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="todoName"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <button>Add Todo</button>
    </form>
  );
};

// features/todos/TodoList.tsx

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

// Import selector and action from slice:
import { selectTodos, toggleTodo } from "./todosSlice";

// We use RootState we defined earlier
// to make `useSelector` understand 
// the store structure via type assertion 
// with the `TypedUseSelectorHook` generic:
const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;

export const TodoList = () => {
  const dispatch = useDispatch();
  // Now, use the selector inside right away,
  // no need to destructure the result:
  const todos = useTypedSelector(selectTodos);

  // The rest of the code stays the same:
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => dispatch(toggleTodo(todo.id))}
          />
          {todo.title}
        </li>
      ))}
    </ul>
  );
};



We gain some advantages using RTK, such as:

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">How to Use Redux Toolkit with TypeScript</h1><p>The <a href="https://redux-toolkit.js.org/introduction/quick-start" target="_blank" rel="noopener noreferrer nofollow">Redux Toolkit</a> package is intended to be the standard way to write Redux logic. It simplifies the store creation and decreases the amount of boilerplate code.</p><p>Let's rewrite the application we wrote in <a href="https://www.newline.co/@bespoyasov/how-to-use-redux-with-typescript--2b005050" target="_blank" rel="noopener noreferrer nofollow">one of the earlier posts</a> from scratch to see what will change.</p><h2 class="heading-anchor-text" id="installation"><span>Installation</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#installation">#</a></h2><p>First of all, we need to create a new app. We can use Create React App with TypeScript template and then add Redux Toolkit or we can use a <a href="https://github.com/reduxjs/cra-template-redux-typescript" target="_blank" rel="noopener noreferrer nofollow">template</a> that already includes everything we need.</p><div style="
          min-height: 88px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/x-sh" data-uniqueid="cm-4FDDm" id="cm-4FDDm">npx create-react-app redux-toolkit-app --template redux-typescript
# or
yarn create react-app redux-toolkit-app --template redux-typescript</textarea></div><p>Now, if you look in the redux-toolkit-app directory you will see not only App.tsx but also 2 new directories:</p><ul><li><p><code>app</code>, it contains the store configuration;</p></li><li><p><code>features</code>, it contains all the store parts.</p></li></ul><p>For now, let's clear the <code>features</code> directory, we won't need anything inside of it.</p><h2 class="heading-anchor-text" id="new-concept"><span>New Concept</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#new-concept">#</a></h2><p>Redux Toolkit introduces a new concept called a <code>slice</code>.  It is an object that contains a reducer function as a field named <code>reducer</code>, and action creators inside an object called <code>actions</code>.</p><p>Basically, a slice is a store part responsible for a single feature. We may think of it as a set of actions, a reducer, and an initial state.</p><p>Slices allow us to write less code and keep feature-related code closer thus increasing <a href="https://en.wikipedia.org/wiki/Cohesion_(computer_science)" target="_blank" rel="noopener noreferrer nofollow">cohesion</a>.</p><h2 class="heading-anchor-text" id="todos-slice"><span>Todos Slice</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#todos-slice">#</a></h2><p>For our first slice, we're going to use a <code><a href="https://redux-toolkit.js.org/tutorials/basic-tutorial#introducing-createslice" target="_blank" rel="noopener noreferrer nofollow">createSlice</a></code> function. Let's start with re-creating typings for our store:</p><div style="
          min-height: 376px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/typescript" data-uniqueid="cm-0FEfk" id="cm-0FEfk">// features/todos/todosSlice.ts

// We can safely reuse
// types created earlier:
type TodoId = string;

type Todo = {
  id: TodoId;
  title: string;
  completed: boolean;
};

type TodosState = {
  list: Todo[];
};</textarea></div><p>Then, we create an initial state:</p><div style="
          min-height: 136px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/typescript" data-uniqueid="cm-KXpVO" id="cm-KXpVO">// features/todos/todosSlice.ts

const initialState: TodosState = {
  list: [],
};</textarea></div><p>And now, we can start creating a slice:</p><div style="
          min-height: 1240px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/typescript" data-uniqueid="cm-PW5qT" id="cm-PW5qT">// features/todos/todosSlice.ts

export const todosSlice = createSlice({
  // A name, used in action types:
  name: "todos",
  
  // The initial state:
  initialState,
  
  // An object of "case reducers". 
  // Key names will be used to generate actions:
  reducers: {
    addTodo(
      // Arguments of actions are basically the same.
      // The first one is the state,
      // the second one is an action.
      state: TodosState, 
       
      // `PayloadAction` is a generic-type
      // that allows you to specify an action
      // with a typped payload.
      // In our case, this payload is of `Todo` type:
      action: PayloadAction&lt;Todo&gt;
    ) {
      // RTK 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.list.push(action.payload);
    },
    toggleTodo(
      // You can skip typing the state,
      // it will be inferred from the `initialState`.
      // I prefer to explicitly type everything I can
      // but this is not obligatory.
      // For example, this will work as well:
      state, 
      action: PayloadAction&lt;TodoId&gt;
    ) {
      const index = state.list.findIndex(
        ({ id }) =&gt; id === action.payload);
      
      if (index) {
        state.list[index].completed = !state.list[index].completed;
      }
    },
  },
});</textarea></div><p>The <code>todosSlice</code> object now contains <code>actions</code> and <code>reducer</code> fields. Let's export everything they have from the module:</p><div style="
          min-height: 184px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/typescript" data-uniqueid="cm-fvyXy" id="cm-fvyXy">// features/todos/todosSlice.ts

// Export all of the actions:
export const { addTodo, toggleTodo } = todosSlice.actions;

// It is a convention to export reducer as a default export:
export default todosSlice.reducer;</textarea></div><h2 class="heading-anchor-text" id="todos-selector"><span>Todos Selector</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#todos-selector">#</a></h2><p>To use the state in our components, we need to create a state selector. For that, we need to define a <code>RootState</code> type. Let's change the <code>app/store.ts</code> a bit:</p><div style="
          min-height: 400px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/typescript" data-uniqueid="cm-X2HZ7" id="cm-X2HZ7">// app/store.ts

import { configureStore } from "@reduxjs/toolkit";
// Import our reducer from the sluce:
import todosReducer from "../features/todos/todosSlice";

// Use `configureStore` function to create the store:
export const store = configureStore({
  reducer: {
    // Specify our reducer in the reducers object:
    todos: todosReducer,
  },
});

// Define the `RootState` as the return type:
export type RootState = ReturnType&lt;typeof store.getState&gt;;</textarea></div><p>Now return to <code>todosSlice.ts</code> and create a selector:</p><div style="
          min-height: 256px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/typescript" data-uniqueid="cm-PzRPa" id="cm-PzRPa">// features/todos/todosSlice.ts

// ...
// Import the `RootState` type:
import { RootState } from "../../app/store";

// ...

// Create and export the selector:
export const selectTodos = (state: RootState) =&gt; state.todos.list;</textarea></div><h2 class="heading-anchor-text" id="using-in-components"><span>Using in Components</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#using-in-components">#</a></h2><p>The code of our component will be almost the same, except for imports and selector usage. Let's review it:</p><div style="
          min-height: 904px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/typescript-jsx" data-uniqueid="cm-lFQ4I" id="cm-lFQ4I">// features/todos/AddTodo.tsx

import React, { useState } from "react";
import { useDispatch } from "react-redux";
// Import the action from slice:
import { addTodo } from "./todosSlice";

// The rest of the code stays the same:
export const AddTodo = () =&gt; {
  const [title, setTitle] = useState("");
  const dispatch = useDispatch();

  const handleSubmit = (e) =&gt; {
    e.preventDefault();
    setTitle("");

    dispatch(
      addTodo({
        id: Date.now().toString(),
        completed: false,
        title,
      })
    );
  };

  return (
    &lt;form onSubmit={handleSubmit}&gt;
      &lt;input
        type="text"
        name="todoName"
        value={title}
        onChange={(e) =&gt; setTitle(e.target.value)}
      /&gt;
      &lt;button&gt;Add Todo&lt;/button&gt;
    &lt;/form&gt;
  );
};</textarea></div><p>And the list:</p><div style="
          min-height: 1024px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/typescript-jsx" data-uniqueid="cm-yyu46" id="cm-yyu46">// features/todos/TodoList.tsx

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

// Import selector and action from slice:
import { selectTodos, toggleTodo } from "./todosSlice";

// We use RootState we defined earlier
// to make `useSelector` understand 
// the store structure via type assertion 
// with the `TypedUseSelectorHook` generic:
const useTypedSelector: TypedUseSelectorHook&lt;RootState&gt; = useSelector;

export const TodoList = () =&gt; {
  const dispatch = useDispatch();
  // Now, use the selector inside right away,
  // no need to destructure the result:
  const todos = useTypedSelector(selectTodos);

  // The rest of the code stays the same:
  return (
    &lt;ul&gt;
      {todos.map((todo) =&gt; (
        &lt;li key={todo.id}&gt;
          &lt;input
            type="checkbox"
            checked={todo.completed}
            onChange={() =&gt; dispatch(toggleTodo(todo.id))}
          /&gt;
          {todo.title}
        &lt;/li&gt;
      ))}
    &lt;/ul&gt;
  );
};

</textarea></div><h2 class="heading-anchor-text" id="comparison-with-vanilla-redux"><span>Comparison with “Vanilla Redux”</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#comparison-with-vanilla-redux">#</a></h2><p>We gain some advantages using RTK, such as:</p><ul><li><p>There is much less code than before. We have only 1 file per store part now instead of a bunch of files.</p></li><li><p>We don't need to “patch” the useSelector hook, it works out of the box.</p></li><li><p>RTK increases cohesion by making us place the related code closer.</p></li><li><p>We don't need to type every single action by hand anymore.</p></li></ul><p>There are however disadvantages as well:</p><ul><li><p>RTK is another dependency that will take resources to maintain.</p></li></ul><h2 class="heading-anchor-text" id="sources"><span>Sources</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#sources">#</a></h2><ul><li><p><a href="https://www.newline.co/@bespoyasov/how-to-use-redux-with-typescript--2b005050" target="_blank" rel="noopener noreferrer nofollow">How to Use Redux with TypeScript</a></p></li><li><p><a href="https://www.newline.co/@bespoyasov/how-to-use-generics-in-typescript--c9b8f89f" target="_blank" rel="noopener noreferrer nofollow">How to Use Generics in TypeScript</a></p></li><li><p><a href="https://redux-toolkit.js.org/introduction/quick-start" target="_blank" rel="noopener noreferrer nofollow">Redux Toolkit</a></p></li><li><p><code><a href="https://github.com/reduxjs/cra-template-redux-typescript" target="_blank" rel="noopener noreferrer nofollow">cra-template-redux-typescript</a></code></p></li><li><p><code><a href="https://redux-toolkit.js.org/api/createSlice" target="_blank" rel="noopener noreferrer nofollow">createSlice</a></code></p></li><li><p><a href="https://en.wikipedia.org/wiki/Cohesion_(computer_science)" target="_blank" rel="noopener noreferrer nofollow">Cohesion</a></p></li></ul>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How to Use Redux Toolkit with TypeScript

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript