React Redux Typescript Folder and File Structure for Developers

Ahamed Fazil Buhari
Senior Developer
August 21, 2018
Rate this article
[Total: 0    Average: 0/5]

Hello, this is continuation of my previous article on Introduction To Redux – Technical Definitions For Beginners and How to use Redux in React (Typescript) – Adding Important packages. In this article we will see how to setup folder structure for React Redux application especially if we use Typescript.

I hope the below folder and file structure will help and make your development easy to understand and easy to work.




Let’s give short description on each folders and files that will give more knowledge.


Action.ts -> It contains functions which return TYPE and PAYLOAD

ActionTypeKey.ts -> This file contains KEY Values which are used as TYPE

ActionTypes.ts-> This exports all the Actions to the other files (especially Reducer)

IActions.ts-> It contains Interfaces which define all the Actions


Well, this folder is nothing to do with Redux. It is meant for any api call where you want to make in your application. So this will have functions which are making api calls.


It contains react component where you can have design of your component and other lifecycle methods for your component. File with extension .tsx is used when we want to render, for the functionality we can still use simple .ts file.


Again, this folder is nothing to do with react or redux. I use this folder to have constant values and config settings.


If our component needs to have connection to redux store, then this is the place where we need to describe mapStateToProps and mapDispatchToProps and by making use of connect we can connect the component to redux store. The good practice is to mention the name of the file same as name of the file in Component folder. So that it’s easy to find which component have connection to redux store


In models we have interfaces of props and states where we define the structure of your props and state.


In redux terminology reducers are functions with two parameter (state and action) which return new state. We can have multiple reducer function but in the last we need to merge all together combineReducer


In store we define and configure the Store which can be used across the application, also we can specify initialState which holds initial value of our store.


Here, for styling I have used SCSS and we can provide our styling and other stuff related to styling like .ico and images can be put in this folder.

Finally, I am using webpack for building the application and gulp for deploying into my SharePoint site. We will talk about this in the future article. Thank you reading J

The template of this project is available in the github -> this has connection to SharePoint using sp-rest-proxy, which is used to access SharePoint resources for development.

Happy Coding


Category : React, SharePoint, SPFx

Author Info

Ahamed Fazil Buhari
Senior Developer
Rate this article
[Total: 0    Average: 0/5]
Ahamed is a Senior Developer and he has very good experience in the field of Microsoft Technologies, especially SharePoint 2013, 2016 and O365, Azure, ASP.NET, SQL Server, IIS and client more

Leave a comment