Skip to content

Starter kit for react with redux and react material ui in typescript. (React, Dynamic redux module, nested routes for private and protected routes, static checking, material ui))

Notifications You must be signed in to change notification settings

jeevasusej/react-redux-typescript-starter-kit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This project was bootstrapped with Create React App.

Sample demo page

https://jeevasusej.github.io/react-redux-typescript-starter-kit/

Packages used with this project.

  • redux - A predictable state container for JavaScript apps
  • react-redux - React bindings for Redux
  • redux-saga - Redux-saga is a redux middleware library, that is designed to make handling side effects in your redux app
  • react-router-dom
  • redux-dynamic-modules - Modularize Redux by dynamically loading reducers and middlewares
  • connected-react-router - A Redux binding for React Router v4 - This can be removed based on your need. It is not mandatory
  • axios - Promise based HTTP client for the browser and node.js
  • material-ui - React components for material design
  • clsx - A tiny utility for constructing className strings conditionally
  • axios-mock-adapter (Need to be removed after API implementation) - Axios adapter that allows to easily mock requests

Development Dependencies - Refer the below links for Static Type Checking implementation

Eslint and Prettier for development

Project Folder Structure

Folder structure

Based on the redux dynamic modules, features splitted as module. App inital configuration can be found inside the shared/config folder.

  • configureStore.ts - configuration for setup for the initial app
  • rootModule.ts - Root module (Redux-dynamic-module) for the redux store
  • theme.ts - Customized theme configuration for the application. It is based on the react material ui.
  • types.ts - Root type for redux pros and actions. This type intersect with the upcoming types for static checking

Each feature module can contain the following default folders.

  • actions - Actions for the react redux
  • api - All api related functionality goes here
  • components - Feature module components, which is not connected to the redux
  • containers - Redux HOC - all the containers goes here
  • module - Redux dynamic module file has been declared in this folder. Folder can be removed.
  • reducers - Feature module's reducers
  • saga - Side effects related to feature module
  • types - Types related to feature module
  • styles - Styles for current feature

Routes

Nested routes added to this started kit. Home represents routes after logged in. Landing represents - routes before login. This is useful and handy when we have different kind of layout for the landing pages and the dashboard pages. The layout folder contains common components shared with Home and Landing. These routes contain the common layout that can be shared with the feature module.

Feature folder

All feature related develoment will goes here.