[Docs Rewrite] Meta-Issue: Using Redux

[markerikson]

This is a tracking issue to cover all work related to creating the new "Real World Usage" "Using Redux" section.

Original plan was to call it "Real World Usage", but after thinking it over further, I'm inclined to go with a category name of "Using Redux" to match the React-Redux and Redux Toolkit docs, with a category base URL of /usage/. (I see that I did do a Twitter poll almost a year ago, and "Real World Usage" won 60% to 18%, so I'm willing to discuss this further if anyone has particularly strong feelings about it.)

Tasks

• Confirm desired outline of content
• Topics
  • Side effects (comparisons of different approaches, how to choose a side effects lib, etc)
  • Debugging
  • Static types (move existing "TS" page?
  • Selectors
  • Using middleware effectively (including writing custom middleware)
  • Folder+file structures
  • Use of Redux Toolkit
  • Working with the Redux ecosystem
  • Performance (batching subscriptions, other perf) (Add an "Optimization" recipe #1783)
  • Advanced topics (store enhancers, etc)
  • Data Fetching and Caching practices ([Docs Rewrite] New Page: Data Fetching and Caching #3613)
  • Writing logic as state machines ( [Docs Rewrite] Meta-Issue: Using Redux #3598 )
  • Randomness
  • Architectural patterns: "Redux modules", and avoiding importing the store into other code (modules export an initModule(store) function; broadcast store instance via event emitter; have modules provide middleware, etc)

[markerikson]

Debating the naming a bit.

I've been labeling this section as "Real World Usage". RTK and React-Redux currently have sections called "Using React-Redux" / "Using Redux Toolkit". Currently, the "Recipes" section is kinda along the lines of what we want this to eventually be.

Just put up a poll asking for preferences on naming:

https://twitter.com/acemarke/status/1210292399085412352

[markerikson]

I wrote a post about ways to semi-predictably use randomness "safely" a couple years ago:

https://blog.isquaredsoftware.com/2018/01/marks-dev-links-001/#experiments-with-randomness-in-redux

and this post appears to be covering something similar:

https://spin.atomicobject.com/2020/01/21/redux-restorable-randomness

[markerikson]

Discussion on cross-importing slices and dealing with circular references:

https://twitter.com/acemarke/status/1091786910530338817

[markerikson]

More waffling over naming: https://twitter.com/acemarke/status/1355992742522880000

Final results of that poll:

• "Using Redux": 42.7%
• "Real World Usage": 57.4%

Despite it getting fewer votes, I think I'm basically set on "Using Redux" at this point.

[markerikson]

We ought to rework "Configuring Your Store" some:

• flip the ordering so that RTK's configureStore is first, and maybe show an example of writing that wrapper around configureStore for your preloaded state or similar (because that probably will pop up when you start writing tests)
• label the rest as "writing this by hand", but tbh I'm not even entirely sure I want to keep all that. maybe even ditch all the hand-written section? which leaves this kinda short. anything else to show there?

[markerikson]

Random bit I wrote on Reddit years ago and always meant to include - some conceptual thoughts on "ways to model a problem" / "where does business logic go?":

As a specific example, let's say that you have a todo list (of course) that can only hold 5 todos max. You could:

1. Always dispatch "TODO_ADDED", and let the reducer ignore the action and do nothing if there's already 5 entries
2. Get the state.todos array as a prop in a component, check the size when they click "add", and not dispatch if there's already 5
3. Dispatch a thunk, call getState(), check the size of state.todos, and not dispatch if there's already 5
4. Use a selector, determine if the size is 5, and disable the input field and "Add" button if that's the case

Personally, I'd go for some combination of 1 and 4. Prevent the user from actually doing invalid operations, and also have logic that prevents invalid states. But, 2 and 3 are potential ways to approach this as well.

https://www.reddit.com/r/reactjs/comments/dfvxke/is_redux_a_musthave/

[markerikson]

Should link to https://calendar.perfplanet.com/2023/fastest-way-passing-state-javascript-revisited/ on the SSR page as a way to improve the perf of parsing JSON for preloaded state .