In this article, we will learn how to use 

 hooks with TypeScript to build a note taking app.

 is an incredibly useful tool for centralised state management in React apps. However, introducing Redux into a React project can be a bit intimidating because it introduces a number of new concepts - state, actions, reducers, selectors, action creators etc., and adds a fair bit of boilerplate code. This has, however, changed for the better since the introduction of 

. In this article, we will learn how to add Redux to a simple React TypeScript app, and how to use and manipulate application state.

 to generate a stock React app. We can generate a TypeScript-based app by specifying the template argument as below. We'll call our app 

npx create-react-app --template typescript react-redux-typescript

Once this is done, the next step is to add 

cd react-redux-typescript
yarn add redux react-redux

 is written in TypeScript, we don't need to install any additional types for it. We do, however need to install the types for 

We can then open the project in our code editor and start hacking! 🤓

Step 2: Start Building Note Taking App Layout 🎨

We can remove the default layout generated by 

 and replace it with the following initial layout that includes an input for typing in a note.

import React from "react";

function App() {
  return (
    <>
      <div>
        <input type="text" name="note" placeholder="Note" />
        <button>Add note</button>
      </div>
      <hr />
      <ul>
        <li>Some note</li>
      </ul>
    </>
  );
}

export default App;


It will be useful to separate the note input into its own component for ease of use and modification later on. So we can create a new file 

import React from "react";

const NewNoteInput = () => {
  return (
    <div>
      <input type="text" name="note" placeholder="Note" />
      <button>Add note</button>
    </div>
  );
};

export default NewNoteInput;


import React from "react";
import NewNoteInput from "./NewNoteInput";

function App() {
  return (
    <>
      <NewNoteInput />
      <hr />
      <ul>
        <li>Some note</li>
      </ul>
    </>
  );
}

export default App;

Now, we'd like to know when the 'Add note' button is clicked, so that we can add a note. We can do so by defining a function prop for the 

 component, which gets called each time the 'Add note' button is clicked.

import React, { ChangeEvent } from "react";

interface NewNoteInputProps {
  addNote(note: string): void;
}

export const NewNoteInput: React.FC<NewNoteInputProps> = ({ addNote }) => {
  const [note, setNote] = React.useState("");

  const updateNote = (event: ChangeEvent<HTMLInputElement>) => {
    setNote(event.target.value);
  };

  const onAddNoteClick = () => {
    addNote(note);
    setNote("");
  };

  return (
    <div>
      <input
        onChange={updateNote}
        value={note}
        type="text"
        name="note"
        placeholder="Note"
      />
      <button onClick={onAddNoteClick}>Add note</button>
    </div>
  );
};

 function that takes a string input for a note. The component also maintains an internal state for the current note being typed. This value is updated on each change of the note input element. When the 'Add note' button is clicked, the 

 function passed in, and cleans up the internal state. It's important to note the types we've used here:

 to pass in a callback. For now we can use 

We are now ready to introduce Redux into our app! 

The first step towards this is to create a reducer.

Reducers are pure functions that are used to populate new values for any piece of state. A reducer takes two parameters - the previous state value, and an action that contains a payload that is used to a'er the state value.

export interface NotesState {
  notes: string[];
}

const initialState = {
  notes: [],
};

export type Action = { type: "ADD_NOTE"; payload: string };

export const notesReducer = (
  state: NotesState = initialState,
  action: Action
) => {
  switch (action.type) {
    case "ADD_NOTE": {
      return { ...state, notes: [...state.notes, action.payload] };
    }
    default:
      return state;
  }
};


 which includes an array of notes that have been added. The 

 represents the state at the point when the app is loaded, where there are no notes saved yet.

 and a string payload which is the actual note to be added. 

💡 If we would like to add more actions, we can define them separately and combine them together using a TypeScript union type.

We can now create a Redux store that manages the state of our application by using our 

import { createStore } from "redux";
import { notesReducer } from "./notesReducer";

export const store = createStore(notesReducer);


The final step to connect it all up, is to wrap our application in a 

 prop to which we will pass the store we have created previously.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { Provider } from "react-redux";
import { store } from "./store";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

serviceWorker.unregister();


Previously when building the layout in our 

 file, we used a placeholder to indicate the list of added notes. We'd now like to populate that list with real data, and for that we will need to access the state of our app.

. A selector is a function that parses the state and gives back the required slice of it.

 array from the state, so we can access it like so:

import React from "react";
import { NewNoteInput } from "./NewNoteInput";
import { useSelector } from "react-redux";
import { NotesState } from "./notesReducer";

function App() {
  const notes = useSelector<NotesState, NotesState["notes"]>(
    (state) => state.notes
  );

  return (
    <>
      <NewNoteInput addNote={alert} />
      <hr />
      <ul>
        {notes.map((note) => {
          return <li key={note}>{note}</li>;
        })}
      </ul>
    </>
  );
}

export default App;


 hook takes a function that receives the 

 as a parameter, and returns a specific part of it. It also accepts two type arguments:

We're now displaying live data from the state in our application. However, there 

no data to display since we're not adding anything to the state store in the first place!

. Instead, we need to pass in a function that will dispatch an 

 hook that gives us access to a function that can dispatch actions to our store. We can use it with our 

import React from "react";
import { NewNoteInput } from "./NewNoteInput";
import { useSelector, useDispatch } from "react-redux";
import { NotesState } from "./notesReducer";

function App() {
  const notes = useSelector<NotesState, NotesState["notes"]>(
    (state) => state.notes
  );
  const dispatch = useDispatch();

  const onAddNote = (note: string) => {
    dispatch({ type: "ADD_NOTE", payload: note });
  };

  return (
    <>
      <NewNoteInput addNote={onAddNote} />
      <hr />
      <ul>
        {notes.map((note) => {
          return <li key={note}>{note}</li>;
        })}
      </ul>
    </>
  );
}

export default App;


This can, however, open up many possibilities for errors - we could make an unintentional typo, get one of the property names wrong, or assign the wrong values. 

 offers a feature called Action Creators which helps avoid these errors.

To make use of this feature, we can create a new file, say 

, that will define our action creators. We can move the definition of the 

export type Action = { type: "ADD_NOTE"; payload: string };

export const addNote = (note: string): Action => ({
  type: "ADD_NOTE",
  payload: note,
});


This means that any component that calls the 

 function only needs to be concerned about the note itself, rather than all the other formatting around the actual action.

import React from "react";
import { NewNoteInput } from "./NewNoteInput";
import { useSelector, useDispatch } from "react-redux";
import { NotesState } from "./notesReducer";
import { addNote } from "./actions";

function App() {
  const notes = useSelector<NotesState, NotesState["notes"]>(
    (state) => state.notes
  );
  const dispatch = useDispatch();

  const onAddNote = (note: string) => {
    dispatch(addNote(note));
  };

  return (
    <>
      <NewNoteInput addNote={onAddNote} />
      <hr />
      <ul>
        {notes.map((note) => {
          return <li key={note}>{note}</li>;
        })}
      </ul>
    </>
  );
}

export default App;


And there we have it! We are now displaying the notes from our app state in the list, and adding to the list each time a new note is added. ✅

All the code from this article is at https://github.com/satansdeer/react-redux-typescript.

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Using React Redux with TypeScript</h1><div data-node-type="summary" class="summary-block">In this article, we will learn how to use <code>react-redux</code> hooks with TypeScript to build a note taking app.</div><p><a href="https://redux.js.org/" rel="noopener noreferrer nofollow">Redux</a> is an incredibly useful tool for centralised state management in React apps. However, introducing Redux into a React project can be a bit intimidating because it introduces a number of new concepts - state, actions, reducers, selectors, action creators etc., and adds a fair bit of boilerplate code. This has, however, changed for the better since the introduction of <code>react-redux</code> hooks such as <code>useSelector</code> and <code>useDispatch</code>. In this article, we will learn how to add Redux to a simple React TypeScript app, and how to use and manipulate application state.</p><h3><a name="prerequisites" id="prerequisites">Prerequisites</a></h3><ul><li><p><a href="https://nodejs.org/en/download/" rel="noopener noreferrer nofollow">Node.js</a> and <code><a href="https://yarnpkg.com/" rel="noopener noreferrer nofollow">yarn</a></code>.</p></li><li><p><a href="https://code.visualstudio.com/" rel="noopener noreferrer nofollow">Visual Studio Code</a> (or another code editor of your choice).</p></li><li><p>Fair working knowledge of JavaScript/TypeScript and <a href="https://reactjs.org/" rel="noopener noreferrer nofollow">React</a>.</p></li></ul><h3><a name="step-1-set-up-react-app-🏗" id="step-1-set-up-react-app-🏗">Step 1: Set up React App 🏗</a></h3><p>We will use <code>create-react-app</code> to generate a stock React app. We can generate a TypeScript-based app by specifying the template argument as below. We'll call our app <code>react-redux-typescript</code>.</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-X4Ttb" id="cm-X4Ttb">npx create-react-app --template typescript react-redux-typescript</textarea><p>Once this is done, the next step is to add <code>redux</code> and <code>react-redux</code> to the project, like so:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-oRTAz" id="cm-oRTAz">cd react-redux-typescript
yarn add redux react-redux</textarea><p>Since <code>redux</code> is written in TypeScript, we don't need to install any additional types for it. We do, however need to install the types for <code>react-redux</code>.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-IewWr" id="cm-IewWr">yarn add @types/react-redux</textarea><p>We can then open the project in our code editor and start hacking! 🤓</p><h3><a name="step-2-start-building-note-taking-app-layout-🎨" id="step-2-start-building-note-taking-app-layout-🎨">Step 2: Start Building Note Taking App Layout 🎨</a></h3><p>We can remove the default layout generated by <code>create-react-app</code> in <code>App.tsx</code> and replace it with the following initial layout that includes an input for typing in a note.</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-wt7K1" id="cm-wt7K1">import React from "react";

function App() {
  return (
    &lt;&gt;
      &lt;div&gt;
        &lt;input type="text" name="note" placeholder="Note" /&gt;
        &lt;button&gt;Add note&lt;/button&gt;
      &lt;/div&gt;
      &lt;hr /&gt;
      &lt;ul&gt;
        &lt;li&gt;Some note&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/&gt;
  );
}

export default App;
</textarea><p>It will be useful to separate the note input into its own component for ease of use and modification later on. So we can create a new file <code>NewNoteInput.tsx</code> with the following layout.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-cn6bW" id="cm-cn6bW">import React from "react";

const NewNoteInput = () =&gt; {
  return (
    &lt;div&gt;
      &lt;input type="text" name="note" placeholder="Note" /&gt;
      &lt;button&gt;Add note&lt;/button&gt;
    &lt;/div&gt;
  );
};

export default NewNoteInput;
</textarea><p>So our <code>App.tsx</code> will now look like this:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-kBHGp" id="cm-kBHGp">import React from "react";
import NewNoteInput from "./NewNoteInput";

function App() {
  return (
    &lt;&gt;
      &lt;NewNoteInput /&gt;
      &lt;hr /&gt;
      &lt;ul&gt;
        &lt;li&gt;Some note&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/&gt;
  );
}

export default App;</textarea><p>Now, we'd like to know when the 'Add note' button is clicked, so that we can add a note. We can do so by defining a function prop for the <code>NewNoteInput</code> component, which gets called each time the 'Add note' button is clicked.</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-Prhh5" id="cm-Prhh5">import React, { ChangeEvent } from "react";

interface NewNoteInputProps {
  addNote(note: string): void;
}

export const NewNoteInput: React.FC&lt;NewNoteInputProps&gt; = ({ addNote }) =&gt; {
  const [note, setNote] = React.useState("");

  const updateNote = (event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
    setNote(event.target.value);
  };

  const onAddNoteClick = () =&gt; {
    addNote(note);
    setNote("");
  };

  return (
    &lt;div&gt;
      &lt;input
        onChange={updateNote}
        value={note}
        type="text"
        name="note"
        placeholder="Note"
      /&gt;
      &lt;button onClick={onAddNoteClick}&gt;Add note&lt;/button&gt;
    &lt;/div&gt;
  );
};</textarea><p>The <code>NewNoteInput</code> component now takes an <code>addNote</code> function that takes a string input for a note. The component also maintains an internal state for the current note being typed. This value is updated on each change of the note input element. When the 'Add note' button is clicked, the <code>onAddNoteClick</code> function is invoked, which calls the <code>addNote</code> function passed in, and cleans up the internal state. It's important to note the types we've used here:</p><ul><li><p><code>React.FC&lt;NewNoteInputProps&gt;</code> indicates that <code>NewNoteInput</code> is a React function component that takes props of type <code>NewNoteInputProps</code>.</p></li><li><p><code>ChangeEvent</code> is the type of event that's triggered when the value of an element changes, and it takes an additional type argument to indicate the exact type of element, which in our case is <code>HTMLInputElement</code>.</p></li></ul><p>We can then use the <code>addNote</code> prop in <code>App.tsx</code> to pass in a callback. For now we can use <code>alert</code> to make sure that it's working.</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-69TMx" id="cm-69TMx">&lt;NewNot</textarea><p>eInput addNote={alert}/&gt;</p><p></p><h3><a name="step-3-connect-redux-🔌" id="step-3-connect-redux-🔌">Step 3: Connect Redux 🔌</a></h3><p>We are now ready to introduce Redux into our app! </p><p>The first step towards this is to create a reducer.</p><p>Reducers are pure functions that are used to populate new values for any piece of state. A reducer takes two parameters - the previous state value, and an action that contains a payload that is used to a'er the state value.</p><p>Let's create a <code>notesReducer.ts</code> file that contains this function.</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-BRPnG" id="cm-BRPnG">export interface NotesState {
  notes: string[];
}

const initialState = {
  notes: [],
};

export type Action = { type: "ADD_NOTE"; payload: string };

export const notesReducer = (
  state: NotesState = initialState,
  action: Action
) =&gt; {
  switch (action.type) {
    case "ADD_NOTE": {
      return { ...state, notes: [...state.notes, action.payload] };
    }
    default:
      return state;
  }
};
</textarea><p>Here, we have defined an interface for <code>NotesState</code> which includes an array of notes that have been added. The <code>initialState</code> represents the state at the point when the app is loaded, where there are no notes saved yet.</p><p>We have also defined a type for <code>Action</code>, which contains a type <code>ADD_NOTE</code> and a string payload which is the actual note to be added. </p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>💡 If we would like to add more actions, we can define them separately and combine them together using a TypeScript union type.</p></div></div><p>We can now create a Redux store that manages the state of our application by using our <code>notesReducer</code>. We can create a <code>store.ts</code> file to hold this object.</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-e0NHb" id="cm-e0NHb">import { createStore } from "redux";
import { notesReducer } from "./notesReducer";

export const store = createStore(notesReducer);
</textarea><p>The final step to connect it all up, is to wrap our application in a <code>react-redux</code> Provider.</p><p>In the app's <code>index.tsx</code>, we will import <code>Provider</code> from <code>react-redux</code> and wrap our app in it. The <code>Provider</code> takes a <code>store</code> prop to which we will pass the store we have created previously.</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-QKHeY" id="cm-QKHeY">import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { Provider } from "react-redux";
import { store } from "./store";

ReactDOM.render(
  &lt;React.StrictMode&gt;
    &lt;Provider store={store}&gt;
      &lt;App /&gt;
    &lt;/Provider&gt;
  &lt;/React.StrictMode&gt;,
  document.getElementById("root")
);

serviceWorker.unregister();
</textarea><p></p><h3><a name="step-4-use-and-manipulate-state-✨" id="step-4-use-and-manipulate-state-✨">Step 4: Use and manipulate state ✨</a></h3><p>Previously when building the layout in our <code>App.tsx</code> file, we used a placeholder to indicate the list of added notes. We'd now like to populate that list with real data, and for that we will need to access the state of our app.</p><p>We can access this state using the <code>useSelector</code> hook from <code>react-redux</code>. A selector is a function that parses the state and gives back the required slice of it.</p><p>In our case, we'd like the <code>notes</code> array from the state, so we can access it like so:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-VZPp2" id="cm-VZPp2">import React from "react";
import { NewNoteInput } from "./NewNoteInput";
import { useSelector } from "react-redux";
import { NotesState } from "./notesReducer";

function App() {
  const notes = useSelector&lt;NotesState, NotesState["notes"]&gt;(
    (state) =&gt; state.notes
  );

  return (
    &lt;&gt;
      &lt;NewNoteInput addNote={alert} /&gt;
      &lt;hr /&gt;
      &lt;ul&gt;
        {notes.map((note) =&gt; {
          return &lt;li key={note}&gt;{note}&lt;/li&gt;;
        })}
      &lt;/ul&gt;
    &lt;/&gt;
  );
}

export default App;
</textarea><p>The <code>useSelector</code> hook takes a function that receives the <code>state</code> as a parameter, and returns a specific part of it. It also accepts two type arguments:</p><ul><li><p><code>NotesState</code>, which indicates the type of the state object.</p></li><li><p><code>NotesState["notes"]</code>, which specifies the type of the returned slice, which in our case is an array of strings.</p></li></ul><p>We then use the <code>notes</code> array to render a list of notes.</p><p>We're now displaying live data from the state in our application. However, there <em>is </em>no data to display since we're not adding anything to the state store in the first place!</p><p>We are still passing in <code>alert</code> as the <code>addNote</code> callback to <code>NewNoteInput</code>. Instead, we need to pass in a function that will dispatch an <code>ADD_NOTE</code> action which will trigger the <code>notesReducer</code> and add the note to the state.</p><p><code>react-redux</code> provides a <code>useDispatch</code> hook that gives us access to a function that can dispatch actions to our store. We can use it with our <code>addNote</code> callback to dispatch the <code>ADD_NOTE</code> action.</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-UpeYA" id="cm-UpeYA">import React from "react";
import { NewNoteInput } from "./NewNoteInput";
import { useSelector, useDispatch } from "react-redux";
import { NotesState } from "./notesReducer";

function App() {
  const notes = useSelector&lt;NotesState, NotesState["notes"]&gt;(
    (state) =&gt; state.notes
  );
  const dispatch = useDispatch();

  const onAddNote = (note: string) =&gt; {
    dispatch({ type: "ADD_NOTE", payload: note });
  };

  return (
    &lt;&gt;
      &lt;NewNoteInput addNote={onAddNote} /&gt;
      &lt;hr /&gt;
      &lt;ul&gt;
        {notes.map((note) =&gt; {
          return &lt;li key={note}&gt;{note}&lt;/li&gt;;
        })}
      &lt;/ul&gt;
    &lt;/&gt;
  );
}

export default App;
</textarea><p>In the <code>onAddNote</code> function, we have manually defined the <code>ADD_NOTE</code> action in the format expected by the <code>notesReducer</code>.</p><p>This can, however, open up many possibilities for errors - we could make an unintentional typo, get one of the property names wrong, or assign the wrong values. <code>react-redux</code> offers a feature called Action Creators which helps avoid these errors.</p><p>To make use of this feature, we can create a new file, say <code>actions.ts</code>, that will define our action creators. We can move the definition of the <code>Action</code> type into this file as well.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-Mzcir" id="cm-Mzcir">export type Action = { type: "ADD_NOTE"; payload: string };

export const addNote = (note: string): Action =&gt; ({
  type: "ADD_NOTE",
  payload: note,
});
</textarea><p>This means that any component that calls the <code>addNote</code> function only needs to be concerned about the note itself, rather than all the other formatting around the actual action.</p><p>We can now refactor <code>App.tsx</code> to use this action creator.</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-gEh32" id="cm-gEh32">import React from "react";
import { NewNoteInput } from "./NewNoteInput";
import { useSelector, useDispatch } from "react-redux";
import { NotesState } from "./notesReducer";
import { addNote } from "./actions";

function App() {
  const notes = useSelector&lt;NotesState, NotesState["notes"]&gt;(
    (state) =&gt; state.notes
  );
  const dispatch = useDispatch();

  const onAddNote = (note: string) =&gt; {
    dispatch(addNote(note));
  };

  return (
    &lt;&gt;
      &lt;NewNoteInput addNote={onAddNote} /&gt;
      &lt;hr /&gt;
      &lt;ul&gt;
        {notes.map((note) =&gt; {
          return &lt;li key={note}&gt;{note}&lt;/li&gt;;
        })}
      &lt;/ul&gt;
    &lt;/&gt;
  );
}

export default App;
</textarea><p></p><p>And there we have it! We are now displaying the notes from our app state in the list, and adding to the list each time a new note is added. ✅</p><p>All the code from this article is at https://github.com/satansdeer/react-redux-typescript.</p><p></p>

AUTHOR

Maksim Ivanov

In this article, we will learn how to use react-redux hooks with TypeScript to build a note taking app.

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Using React Redux with TypeScript

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript