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.
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
Leave a comment