Building a Simple React-Redux App with TypeScript

Step 1: Set up a new React project You can create a new React project using create-react-app. Open your terminal and run the following command:

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

This will create a new React project in a folder called my-app using TypeScript.

Step 2: Install Redux and React-Redux To use Redux with React, you'll need to install two packages: redux and react-redux. Open your terminal and run the following command inside your project folder:

npm install redux react-redux

Step 3: Create a Redux store Create a new file called store.ts in your project's src folder and add the following code:

import { createStore } from "redux";

export interface AppState {
  count: number;
}

type AppAction = { type: "INCREMENT" } | { type: "DECREMENT" };

const initialState: AppState = { count: 0 };

function appReducer(
  state: AppState = initialState,
  action: AppAction
): AppState {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

export const store = createStore(appReducer);

Here, we're creating a Redux store using createStore. Our store's initial state is defined in the initialState constant. We're also defining our appReducer function, which handles our state updates based on the action type. Finally, we're exporting the store so we can use it in our app.

Step 4: Create a React component Create a new file called Counter.tsx in your project's src folder and add the following code:

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { AppState } from "./store";

export const Counter: React.FC = () => {
  const count = useSelector((state: AppState) => state.count);
  const dispatch = useDispatch();

  const increment = () => dispatch({ type: "INCREMENT" });
  const decrement = () => dispatch({ type: "DECREMENT" });

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
};

Here, we're creating a simple React component that uses the useSelector hook to get the current count value from our Redux store. We're also using the useDispatch hook to get a reference to the dispatch function, which we'll use to dispatch our actions.

We're defining two functions increment and decrement that dispatch the corresponding actions to update the state.

Finally, we're rendering the current count value and two buttons that call our increment and decrement functions when clicked.

Step 5: Render the component In your src/index.tsx file, import the Counter component and render it like so:

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { store } from "./store";
import { Counter } from "./Counter";

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

Here, we're wrapping our Counter component inside a Provider.

In this tutorial, we've learned how to create a simple React-Redux app using TypeScript. We started by setting up a new React project and installing the required packages - redux and react-redux.

We then created a Redux store and defined our appReducer function to handle state updates based on the action type. We also created a React component Counter.tsx that uses the useSelector and useDispatch hooks to get the current count value from the store and dispatch actions to update the state.

Finally, we rendered the Counter component by wrapping it inside a Provider component, which provides the store to all child components.

This is just a basic example to get you started with React-Redux and TypeScript. With this knowledge, you can build more complex apps using Redux and React.

Just created a simple React-Redux app using TypeScript! 🚀