/redux-essentials-ts

The Redux Essentials tutorial, but in TypeScript

Primary LanguageCSS

Redux Essentials - TypeScript

This is a TypeScript version of the Redux Essentials Tutorial. It tries to follow the original as closely as possible.

Key differences

TypeScript

  • All JavaScript files are converted to TypeScript
    • mockServiceWorker.js is automatically generated by msw, and has been left as is
  • Extensions have been made into .ts and .tsx, depending on their use of JSX
  • Types have been added to src/app-lib/hooks.ts and src/app-lib/store.ts
  • API response and request types have been added to src/types/api.ts
  • Changes have been made to the code in src/api/server.ts to satisfy TypeScript compiler
    • Most of the changes involve 404 errors when invalid IDs are passed.

Tooling

  • Vite is used for building rather than react-scripts (Webpack)
    • index.html is in a different location for Vite compatibility. See here for more details.
    • index.js is now main.tsx, and index.css is now main.css. This isn't strictly required but it's a Vite convention.
  • Husky will run Prettier at every commit
    • If this is undesirable, simply delete the lint-staged portion at the bottom of package.json.
  • ESLint setup has been changed
    • New setup uses plugin recommended settings instead of react-scripts.
    • New import rule for using typed Redux hooks

Libraries

  • React Router upgraded to v6
    • There are a lot of API changes that are incompatible. See here for more details.
  • faker has been replaced with @faker-js/faker
    • faker appears to be unmaintained, and as for the latest package... see for yourself.
  • Unused libraries are uninstalled

Code changes

  • src/app has been renamed to src/app-lib
    • This is to avoid naming conflicts (e.g. if src/app/index.ts were to be added).
  • Function component declarations (e.g. function MyComponent()) have been changed to arrow function expressions (e.g. const MyComponent: FC<Props> =)
    • This facilitates better typing practices, and is more common in modern code.
    • The two are not strictly the same. See here for more details.