Using React Native TypeScript and Redux

3 min readMar 23, 2022

Hi, in this article, I will try to explain how to use React Native, TypeScript, and Redux structures together. Before moving on to the subject, I want to give information about technologies.

React Native

React Native is a mobile application development framework that recognizes for developing multi-platform Android and iOS applications using native user interface (UI) components. This framework for mobile application development started in the summer of 2013 in Facebook Hackathon Project. Its first presentation was held at the Reactjs Conference in January 2015, and in March 2015 Facebook made React Native open and available on GitHub.

TypeScript

TypeScript is a powerful type, the object-oriented programming language that describes compilation. Designed by Anders Hejlsberg, a Microsoft employee and designer of the C# language, the first version was published in 2012. We can define TypeScript as both a language and a set of tools. It can be used to write JavaScript programs that can run in a client or server environment. It can be defined as a superset that includes all the features of JavaScript and added additional features. Increases productivity in complex and large projects.

Redux

Redux is an open-source JavaScript library for managing the application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to Facebook’s Flux architecture, it was created by Dan Abramov and Andrew Clark. The reason Redux and React are used together is that they are popular together and work very well in an integrated way. Redux is based on the Application State Management system. While developing React applications, development is made through state components. Redux is the library that allows us to manage these state components.

Let’s start making our project

First of all, you need to install our react native project on the typescript template. For this process, we run the code below on the terminal screen.

> react-native init MySampleApp --template typescript

Inside the resulting template file will be our main project directory. We take the folder and move it to another directory and rename it with the project name. There are still a few more steps we have to take before the project gets to work. First of all, in order to create the node_modules file, we write the following code in the command system in the directory where the files are located.

> npm install

After the process is over, we start the project by writing the code of the platform you want to run on the terminal screen.

> react-native run-ios

We have completed the Typescript part of our project at this stage. Next, we will install the necessary packages so that we can use the redux structure.

> npm install redux react-redux redux-thunk
> npm install --save-dev @types/react-redux

After installing the packages, we create a folder named src in the main directory of our project. After creating the folder, we will proceed in order with the codes I have given below. We create 2 more folders under the src folder, store, and screens.

src/screens/my-screen/my.screen.tsx

src/screens/my-screen/store/my.action.ts

src/screens/my-screen/store/my.store.ts

src/store/appStore.ts

app.tsx

Project Output