Movies - Redux Toolkit
This is a version of the Movies demo application built using modern practices (as of 2022) for Redux Toolkit.
Creation
- Created a new app using
create vite
. - Created another new app using
create-react-app
with the Redux toolkit + TypeScript template. Copied over thefeatures
andapp
folders. - Linked up the app.
- Added a bunch of other dependencies:
- Vitest/Testing Library
- ESLint/Prettier/Husky/Lint Staged
- Tailwind
Motivation
I made this mostly because I really hated working with Redux (especially Redux Sagas), but after learning about all the changes that has been made to remove the boilerplate, I wanted to give it another shot.
The current React demo application uses Redux, but not in the same way that's being recommended with Redux Toolkit. It's not using TypeScript, and is centered around Next.js, which is not the focus of this project.
Lessons learned
This is a living document that I will add to while building out the application.
- I am starting to prefer
json
for most configuration files, mostly because most examples are written injson
, and it makes it a lot easier to transition and copy/paste (especially compared toyaml
). - I created a util file which includes
getAliasEntries
. The motivation is to create one single source of truth for aliases (coming fromtsconfig.json
). However,vite
(androllup
as well aswebpack
if I'm not mistaken) don't take in aliases as a glob. I'm pretty sure there's room for a package to be built around this problem (if not already). - I really like that
create vite
exposes thevite.config.ts
file directly, rather than hiding it behind a package (like increate-react-app
ornx
). It makes it a lot easier to extend. - There are a couple problems (nitpicky details) I have about the original file structure from
create-react-app
(which is the same file structure promoted by Mark Erikson).- Contents of
app
folder should be infeatures
- The
app
folder can cause naming clashes, since most React apps have a file calledApp.tsx
, and importing everything through anindex.ts
is a common pattern (that I use in this app). - All of the logic within
app
is very closely related to everything withinfeatures
, and it's odd that they're so split far apart (with multiple../..
import statements). - I advocate placing
hooks.ts
andstore.ts
within thefeatures
folder directly. It makes imports look nicer, and puts all related logic in the same location. - This structure also sits better with monorepo strucutres (particularly the type that Nx prefers).
- The
counterSlice
should not default importcounterReducer
- If the file is named
counterSlice
, it strikes me that thedefault
import should becounterSlice
itself, rather than the reducer. I removed thedefault
import and exported a separate variable specifically namedcounterReducer
.
- If the file is named
- Circular dependency in
counterSlice
- There's a circular type dependency that I discovered when changing the default import. It's caused by using
RootState
within the slice file, as the state and dispatch types are dependent on the exports from the slice. - I don't disagree with pooling all the logic together, since having to switch between multiple files was one of my biggest gripes about sagas. The comments in the default file even mention it's optional. However, circular dependencies can cause confusion. I don't really have any good solutions for this, other than adding a comment that the
RootState
type is dependent on the export.
- There's a circular type dependency that I discovered when changing the default import. It's caused by using
counterAPI
should becounterApi
- Super nitpicky, but
counterApi
is better camel casing. The reason is because, if we were to ever run it through some parsing mechanism (e.g. to snake case), it would becounter-a-p-i
rather thancounter-api
. It's true that JavaScript itself isn't particularly consistent, but I think it's important to establish here.
- Super nitpicky, but
- Should add
index.ts
- Helps prevent having to dig through all the file imports to find the right thing, and also encourages use of proper aliasing.
- Contents of
- I've tried a variety of UI libraries. I really like TailwindCSS, but it doesn't play very well with the most popular UI libraries (namely MUI and Chakra). I tried a variety of different options, and most of the Tailwind based libraries are unnecessarily complex, until I found Daisy UI. It was one of the few libraries that had a NavBar, and where the copy/paste examples "just worked."