Set up Redux to integrate game state with React

[DylanSp]

The RTK Toolkit and react-redux libraries are installed via package.json, but they're not yet configured as part of the app.

Tutorials:

• https://redux.js.org/tutorials/essentials/part-1-overview-concepts
• https://redux.js.org/tutorials/essentials/part-2-app-structure

Template to potentially draw from: https://github.com/reduxjs/redux-templates/tree/master/packages/vite-template-redux

• Most of the setup is under src/app/ - https://github.com/reduxjs/redux-templates/tree/master/packages/vite-template-redux/src/app
• I won't need the API middleware or other stuff related to async/RTK Query right now.
• main.tsx will need to be modified to hook up the store to a <Provider>.

Notes:

• The FAQ suggests using simple action creators, with actions that represent high-level user actions; the complexity goes in the reducers. See https://redux.js.org/faq/code-structure#how-should-i-split-my-logic-between-reducers-and-action-creators-where-should-my-business-logic-go and https://redux.js.org/faq/actions#is-there-always-a-one-to-one-mapping-between-reducers-and-actions.

[DylanSp]

More notes on using Redux:

• Normalizing state in the Redux store - https://redux-toolkit.js.org/usage/usage-guide#normalizing-with-createentityadapter
• Tutorial series - https://blog.isquaredsoftware.com/series/practical-redux/
  • Series is a few years old:
  • Uses older libraries like Redux-ORM - I should be able to get by with Redux Toolkit
  • Uses older tooling (like the way it sets up absolute imports)
  • Includes a fair bit of generic helper code for managing state - not sure how much that's still necessary, especially with createEntityAdapter() from Redux Toolkit
  • Notable nontrivial state management from that series:
  • Data on different tabs - switching tabs shouldn't clear data on the previous tab - https://blog.isquaredsoftware.com/2016/11/practical-redux-part-4-ui-layout-and-project-structure/#handling-tab-state-with-redux
  • Toggling whether an input field is editable, might be usable for some things - https://blog.isquaredsoftware.com/2017/01/practical-redux-part-6-connected-lists-forms-and-performance/#adding-edit-mode-toggles
  • Editing entities, keeping draft/work-in-progress values in state as well as existing values (potentially useful when creating cards?) - https://blog.isquaredsoftware.com/2017/01/practical-redux-part-8-form-draft-data-management/#managing-draft-data-for-forms
  • Having one action creator dispatch multiple actions (though this seems like having lower-level actions instead of actions that represent high-level events, as well as putting a bit more complexity in action creators)
    • https://blog.isquaredsoftware.com/2017/01/practical-redux-part-8-form-draft-data-management/#displaying-the-copied-pilot-entry
    • https://github.com/markerikson/project-minimek/blob/4576f5d878988a69a6a098cbb258346805b6f3ec/src/features/pilots/pilotsActions.js#L45-L47
  • Managing modals with Redux state (tracking whether modal(s) are displayed, displaying them, getting inputs from modals); also includes context menus - https://blog.isquaredsoftware.com/2017/07/practical-redux-part-10-managing-modals/
  • Not sure if this style of managing it all through Redux is still recommended
  • Using React Portals - current API is https://react.dev/reference/react-dom/createPortal
  • Nested data - https://blog.isquaredsoftware.com/2018/01/practical-redux-part-11-nested-data-trees/

[DylanSp]

Forms:

• In the tutorial series, some data from forms goes into Redux state
• https://blog.isquaredsoftware.com/2017/01/practical-redux-part-7-forms-editing-reducers/#buffering-form-changes-and-dispatches - has a FormEntityWrapper that keeps most form state local and dispatches a smaller number of Redux actions
• I'm not sure what form state I'd want in the Redux store, if any.
• From current Redux docs - "Most form state probably shouldn't be kept in Redux. Instead, keep the data in your form components as you're editing it, and then dispatch Redux actions to update the store when the user is done."
• Current Redux docs on handling basic form state (editing a post using mostly component-local state), using react-router, using custom action creator logic in RTK's createSlice() function with a prepare callback - https://redux.js.org/tutorials/essentials/part-4-using-data

For this project - don't worry too much about fancy validation logic, definitely don't bring any additional libraries in; handwrite any simple validation logic that's absolutely necessary.