React Redux Typescript Folder and File Structure for Developers

Ahamed Fazil Buhari
 
Senior Developer
August 21, 2018
 
Rate this article
 
Views
10476

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.

 

image

 

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

Actions

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

API

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.

Components

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.

Config

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

Containers

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

Models

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

Reducers

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

Store

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.

Styles

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 -> https://github.com/ahamedfazil/react-redux-ts-sp this has connection to SharePoint using sp-rest-proxy, which is used to access SharePoint resources for development.

Happy Coding

Ahamed

Category : React, SharePoint, SPFx

Author Info

Ahamed Fazil Buhari
 
Senior Developer
 
Rate this article
 
Ahamed is a Senior Developer and he has very good experience in the field of Microsoft Technologies, especially SharePoint, Azure, M365, SPFx, .NET and client side scripting - JavaScript, TypeScript, ...read more
 

Leave a comment