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 bymsw
, 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
andsrc/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 nowmain.tsx
, andindex.css
is nowmain.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 ofpackage.json
.
- If this is undesirable, simply delete the
- ESLint setup has been changed
- New setup uses plugin recommended settings instead of
react-scripts
. - New import rule for using typed Redux hooks
- New setup uses plugin recommended settings instead of
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 tosrc/app-lib
- This is to avoid naming conflicts (e.g. if
src/app/index.ts
were to be added).
- This is to avoid naming conflicts (e.g. if
- 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.