DEV Community

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

Posted on

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

Oldest 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

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.

Collapse
 
thatonejakeb profile image
Jacob Baker

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