[Docs Rewrite] Create the new "Redux Fundamentals" tutorial

[markerikson]

PR Type 📖

Does this PR add a new page, or update an existing page?

Adds the new "Redux Fundamentals" tutorial sequence

Checklist

• Is there an existing issue for this PR?
  • [Docs Rewrite] Rewrite the existing "Basics/Advanced" tutorial sequence #3855
• Have the files been linted and formatted?

What docs page is being added or updated?

• Section: "Tutorials" > "Redux Fundamentals"
• Page: All of them!

For Adding New Content

What kind of content category is this page (tutorial, how-to, explanation, reference)?

Tutorial.

Who is the intended target audience?

Beginners who know nothing about Redux, yet.

What knowledge are we assuming they have?

• JS syntax: ES6, async/await, object spreads
• React: components, hooks
• Other: HTTP / AJAX, fetch

What are the intended results or takeaways from reading this page?

Users should understand the fundamental concepts and principles of using Redux.

What is the most critical info they should learn?

• Key Redux concepts and terms ("actions", "reducers", "state", "store", "dispatching")
• Core Redux data flow (dispatch -> reducer -> UI)
• Basic usage of Redux with React (useSelector, useDispatch, <Provider>)
• Standard Redux usage patterns (action creators, selectors, normalized state)
• To use Redux Toolkit instead of writing this code by hand

Status

After having written the "Redux Essentials" tutorial, I'm now moving on to rewriting the existing "Basics/Advanced" tutorial sequence.

Per #3855 , the goals are:

• Drop all outdated references ("Flux", "containers", etc)
• Show simpler patterns (inline action types like {type: "todos/addTodo"} vs const ADD_TODO = "ADD_TODO", single-file Redux logic)
• CodeSandbox examples
• Show React-Redux hooks as the default
• Improve explanation flow

and I've written up my plans and intended outline there as well.

Thus far, I've filled out the first two pages ("Overview", "Concepts and Data Flow") with content copy-pasted from the "Essentials" tutorial. I've got the first half of page 3 ("State, Reducers, and Actions") thrown together, although I haven't worked on the actual example app at all yet. I'll need to take time to do that shortly.

Happily, I've got a pretty good picture of how I want to tackle this app and explanation now. I also will be able to reuse some of the explanations from the existing "Basics" tutorial, and I intend to keep this shorter than the "Essentials" tutorial. So, I'm hoping I'll be able to complete this one somewhat faster than the six months it took me to put the "Essentials" tutorial together :)

[github-actions]

Size Change: 0 B

Total Size: 8.9 kB

ℹ️ View Unchanged

Filename	Size	Change
dist/redux.js	6.37 kB	0 B
dist/redux.min.js	2.53 kB	0 B

_{compressed-size-action}

[netlify]

Deploy preview for redux-docs ready!

Built with commit 84b80e6

https://deploy-preview-3894--redux-docs.netlify.app

[markerikson]

Pushed a bunch of updates. @dceddia , I've addressed all the points you listed except for the "middleware" ordering aspect, which I feel is fine as-is. That includes updating the code block comment color to increase the contrast - it's now 9+ against the normal background, and 5-ish against the highlighted.

I've now gone through and updated all of the links that previously pointed to any of the "Basics/Advanced" Markdown files to point to relevant equivalents in the "Fundamentals" section instead. I've also updated the _redirects file to handle external incoming links, and I've pulled the trigger on deleting the old Markdown files.

I think this is basically ready to publish any time now. I'll probably hold off until Monday morning just in case anyone else has feedback over the weekend.

[Shrugsy]

Found that the dark mode colors are a bit messed up on this particular 'Info recap' section in 'part 8'

https://deploy-preview-3894--redux-docs.netlify.app/tutorials/fundamentals/part-8-modern-redux

[markerikson]

Well, that's lovely. I think we may have made a tweak on master at some point? I need to merge down to fix the conflicts anyway

[markerikson]

@Shrugsy yeah, looks like those blockquotes / "detailed" "blocks were just kinda broken in dark mode anyway. I think I've fixed them now.

[phryneas]

As a general note: these codesandboxes have a lot of wasted screen space, especially on my ultrawide monitor.

Maybe we could have those flow out of the text to the left & right (or at least to the left)? I was thinking about that full-bleed column technique by Josh Comeau, but I have no idea how feasible that is in docusaurus.

[markerikson]

Yeah, that's more of a Docusaurus theme thing. Worth noting, but really a separate topic :)

[phryneas]

Really liked it, and didn't really have a lot to citizize.

One point maybe: from reading the tutorial I would assume that it is just not possible to modify the redux state in a mutable way - only in the introduction of RTK you learn that there are things as "accidental mutations".
The whole concept of "mutating state is possible but it causes bugs" is not present anywhere else.

[phryneas]

The navigation below this links back to part 6 of the essentials tutorial. Can we somehow split these up into different navigation paths?

[markerikson]

Nothing we can do here as far as I know - Docusaurus is just pointing to whatever the prev/next page is sequentially in the entire ToC sidebar.

[markerikson]

@phryneas addressed all your points locally.

I did cover examples of mutation in Part 3, but I'll add in a section in the "Store" page to show that you can (but shouldn't) do getState().value = 123.

[markerikson]

Awright, I think this is pretty much good to go at this point. Thanks to everyone who provided feedback - you've really helped polish this!