DEV Community

Cover image for Typescript, react, redux, thunk, and material-ui template
Jacob Baker
Jacob Baker

Posted on

18 3

Typescript, react, redux, thunk, and material-ui template

Over the past day I've revisited the skeleton application that I use as a bootstrap when creating projects. The last time I wrote one with this tech stack was 14 months ago, which in development years is a lifetime!

The app includes:

  • typescript
  • react
  • redux
  • thunk
  • material-ui

Whenever I write a skeleton app I like to add a short, simple, example because without fail after not working with this tech stack for a while I'll forget how everything ties together.

The example in this shows a simple button that adds 10 to a count after a short delay each time it is clicked. The function that adds 10 can (very rarely) intentionally fail to show how the error works.

Feel free to use it, and if you've any questions or suggestions let me know!

Github: https://github.com/jacobbaker/skeleton-ts-react-redux-thunk-mui-2020
Twitter: @thatonejakeb

An update...

Like I said; a lifetime in developer time.

Since writing this the other day I was pointed toward the official Redux+Typescript CRA template which, amongst other things, uses Redux Toolkit to nicely reduce the amount of boilerplate needed.

It such a nice way of working that I've forked it and added Material-UI support which can be either be found here:

Github: https://github.com/jacobbaker/cra-template-redux-typescript-mui

Or when creating a new app:

npx create-react-app my-app --template redux-typescript-mui

DevCycle image

Ship Faster, Stay Flexible.

DevCycle is the first feature flag platform with OpenFeature built-in to every open source SDK, designed to help developers ship faster while avoiding vendor-lock in.

Start shipping

Top comments (3)

Collapse
 
markerikson profile image
Mark Erikson

Note that we now have an official Redux+TypeScript template for Create-React-App, which is built around our official Redux Toolkit package.

You might want to consider forking that template and adding whatever additional styling you want on top of it.

Collapse
 
thatonejakeb profile image
Jacob Baker

Considered and done. Redux Toolkit is such a nice way of working.

Collapse
 
thatonejakeb profile image
Jacob Baker

Ooo I didn’t know that existed, thanks! Looks very different to how I’m used to writing, particularly with a lot of the boilerplate cut out which is nice.

Pulumi Azure GitHub Image

"Give Pulumi a shot and you will never look back" - Engin

Build and ship infrastructure faster using languages you know and love. Use Pulumi’s open source SDK to provision infrastructure on any cloud, and securely and collaboratively build and manage infrastructure using Pulumi Cloud.

Get Started

👋 Kindness is contagious

Take a moment to explore this thoughtful article, beloved by the supportive DEV Community. Coders of every background are invited to share and elevate our collective know-how.

A heartfelt "thank you" can brighten someone's day—leave your appreciation below!

On DEV, sharing knowledge smooths our journey and tightens our community bonds. Enjoyed this? A quick thank you to the author is hugely appreciated.

Okay