The useReducer and useContext can work together by first setting a reducer, and use that in a context so it can be dispached to any children in the app. This can be helpful for not cluttering up a file and keey the code clean, and the dispatch only needs to be defined once.
This can be further decluttered by moving all wired components into a single file, which can be accessed by other components when needed
https://react.dev/learn/scaling-up-with-reducer-and-context ↩