Learn Intermediate Redux by Building Tetris

[QuincyLarson]

No description provided.

[shynonagons]

This is something I'd like to help build. Wondering if we are trying to keep things Codepen-first, as they are now? I ask because a Redux project in Codepen would be a big wall of JS compared to the neater /store /actions /reducers folder structure that's common to Redux projects.

[QuincyLarson]

@Perezvon Thanks for your patience.

To answer your question, you could build this on Glitch instead, or any other place where the demo is live on the internet alongside the code that powers it. Glitch is better for multi-file demos imho.

The first step is to build the project itself. Then you can work backward to break it down into steps, like this: https://github.com/freeCodeCamp/CurriculumExpansion/pull/135/files#diff-99314d694942b489d28d8a6f0c3bc5a3

[shynonagons]

Agreed, I like Glitch. OK I'll get started on building it then!

[padunk]

Hi, I would love to help on this project.
Please let me know if you need help with this @Perezvon
Note: I prefer to build it on CodeSandbox, but I think Glitch will do 😄

[QuincyLarson]

@Perezvon Have you had any time to work on this yet? Please keep us posted on your progress. Once you have a demo - even a really rough one - please share it with us so we can give you feedback 👍

[shynonagons]

@QuincyLarson Yep, I've got a skeleton in place and am just getting started on game logic. I'm building in my local environment (because apparently I've developed preferences) but I'll push it to a repo or to Glitch so that others can help (@padunk I'd be happy to collaborate)! Should be able to get to that tonight or tomorrow.

[QuincyLarson]

@Perezvon Awesome! I am pumped to see it and play with it!

[shynonagons]

@QuincyLarson Here's what I got so far -- like I said, very skeletal. Pieces are just one square each and there's no line-completion check yet. But it's a start. https://glitch.com/edit/#!/perezvon-fcc-redux-tetris

[QuincyLarson]

@Perezvon It looks like this is off to a great start! You even have the "hold down to drop the piece faster" functionality.

I think if people are able to build something like this step by step, it will really help them feel empowered.

Keep up the great work!

[scissorsneedfoodtoo]

@Perezvon, just checking in to see how things are going with your prototype. Were you able to make some progress?

[swyxio]

i am interested in helping! perezvon's demo looks almost there though!

[scissorsneedfoodtoo]

@sw-yx, awesome! We appreciate any help we can get!

It's true that @Perezvon's demo is almost there, but we haven't had an update in some time, so I think it's safe to assume that no further progress was made. The project is all yours! I'm sure he won't mind if you fork his Glitch above if you don't want to start from scratch. If he comes back later and can contribute, perhaps the two of you can finish the prototype and start breaking the project down into short lessons together.

Please take a look at the Contributing doc before you get started. Also, do you have about 15 or 20 minutes to hop on a call? I can show you some of the other projects and answer any questions you might have. If so, please send me a message at [email protected]!

[swyxio]

i will email you :)

[shynonagons]

Hi, I'm here! I got a bit overrun by other life stuff, though, hard to believe it's been this long, sorry about that! I just pushed my latest to the Glitch; the left/right movement is not working and you can't rotate pieces yet, but it does do collision detection more or less properly, IIRC. Anyways @sw-yx if you want to fork what I've got I'd be more than happy to share the duties, or pass the torch, or whatever we decide.

[scissorsneedfoodtoo]

@Perezvon, sorry, I just saw your message. Thank you for your updates! No need to apologize at all. Would you and @sw-yx like to finish this prototype together? Also, we're going to have a quick call about this project next week. Could you join us, @Perezvon? If you have about 30 minutes to talk, please send me an email at [email protected] and I'll send you a calendar invite. I'm sure we can find a day and time for the three of us to talk.

[swyxio]

i have gotten started with a fork: https://glitch.com/edit/#!/swyx-redux-tetris-fcc?path=src/reducers/game.js:59:26

it doesnt work yet but i've updated the reducers to the format in which i think makes sense. needs a little more design work around the game tick and row clearing and scoring.

[scissorsneedfoodtoo]

@sw-yx, awesome, thank you for the update. Looking good so far! Can't wait to play the full game 👍 👍

[swyxio]

yeah trouble is finding time for it right now. i also took way too long to arrive at the gameTick model i wanted.

[swyxio]

woohoo! basic stuff working. https://glitch.com/edit/#!/swyx-redux-tetris-fcc?path=src/utils.js:20:96

[swyxio]

added scoring and "slamming" with the spacebar. https://glitch.com/edit/#!/swyx-redux-tetris-fcc?path=src/reducers/game.js:129:0

at this point the demo is pretty much done except for coding the game over and then clearing up the action/reducer logic

[swyxio]

i've been running into issues with Glitch. https://support.glitch.com/t/the-app-exceeded-the-memory-limit-300-memory-cannot-kill-with-refresh/10661

i honestly would suggest moving to codesandbox. it's just as beginner friendly, but is far more polished especially for people who someday will transition to a full IDE setup.

[swyxio]

Game over is done:

at this point the project is more or less done @scissorsneedfoodtoo pending breaking it up into lessons n stuff like that

[swyxio]

https://glitch.com/~swyx-redux-tetris-fcc

[markerikson]

Nice! I particularly like the use of Redux Starter Kit here - it's something that I want to strongly emphasize when I finally have time to revamp the Redux docs.

The main downside here is that RSK is still pre-1.0, and hooks are still in alpha. Both are still likely to change. For example, right now I'm looking at merging in changes to how useSelector checks equality, and there's still open discussions on how createSlice should behave.

The other issue, of course, is the tradeoff between "RSK makes a lot of Redux stuff easier", and "RSK is an abstraction, and you really need to understand how to do immutable updates and such by hand to properly learn Redux".

[swyxio]

dont worry i think FCC moves a lot slower than you do. completely comfortable adapting to your final API. hardest part’s been done. we ought to push RSK as the default way to do Redux, with the option to drop down to lower level if needed.

[scissorsneedfoodtoo]

@sw-yx, just played a few rounds and everything looks great! Sorry you've run into issues with Glitch. Please feel free to move to CodeSandbox if you'd like. I just found out about it recently and it does seem to model a full IDE much better than Glitch.

[scissorsneedfoodtoo]

@sw-yx, just wanted to check in and see how things are going. Did you have a chance to start breaking this project down into steps?

By the way, I saw your video about Netlify identity and functions on Jason Lengstorf's channel the other week. Good stuff! I learned a lot.

[swyxio]

i haven't! been a bit of busy period in my life right now with a lot of conference commitments. i am probably not gonna get to this at least until august. if anyone else wants to help break this down i'd love help or else this'll have to wait

[scissorsneedfoodtoo]

@sw-yx, no worries, thank you for the update! Looking forward to seeing some of your conferences if they're posted to YouTube.

I'll put the Help Wanted label on this for now, but it's not a problem for this to wait until August or so.

[QuincyLarson]

@sw-yx Thanks for your candor. This project is off to a great start.

Hey @beaucarnes would you be interested in dramatically simplifying this and stripping out all but the most essential parts, then breaking this down into tests?

[beaucarnes]

Sure, I can simplify this and add tests. This project is off to a great start!

[markerikson]

Hi, wanted to follow up on this a bit.

Since the last activity here in this issue:

• We released our React-Redux hooks API as final in v7.1
• Redux Starter Kit was renamed to Redux Toolkit and hit 1.0
• We've added a new "Style Guide" page to the Redux docs with recommended patterns
• And we're working on a rewrite of the Redux core docs

Long-term, my goal is that Redux Toolkit will be the default standard way for people to write Redux logic. At the same time, because there's some "magic" inside (specifically the use of Immer for "mutating" immutable updates, and auto-generated action creators), it does work better if you already understand the core principles of how to write Redux code by hand.

Given that, I'd absolutely like to have FCC teach use of Redux Toolkit as part of its curriculum, but I'm not quite sure on what the best teaching sequence is. That's something I'm still trying to work out myself with the Redux docs rewrite. At the moment, my plan is to have a new "Quick Start" Redux docs tutorial page that teaches Redux in a "top-down" fashion, focusing on how to use RTK and the React-Redux hooks API, with less focus on the why it works this way. Then, the main tutorial sequence will still be a "bottom-up" approach, starting from the core concepts and doing things by hand, and finishing with "and now that you understand the principles, let's look at how RTK simplifies things, and you should always use RTK if possible".

Given FCC's project-based approach here, I don't know what the right explanations would be. But, I'd be happy to discuss potential approaches!

One other thought: I'm not sure that using just a Tetris game for teaching Redux is necessarily the best approach. It's a nice little project idea and may help teach the basic mechanics of dispatching and reading store state, but I don't see it requiring much in the way of typical Redux use cases like writing async thunks, fetching data and interacting with an API, updating items in the store, etc.

[swyxio]

I'm not sure that using just a Tetris game for teaching Redux is necessarily the best approach.

i think this is very valid and something i wondered while making the thing. @beaucarnes do you think we could add some sort of mock data storage maybe? or real (temporary) data storage. i actually dont know the persistence model of Glitch, would love to do it all on one free platform.

[scissorsneedfoodtoo]

@markerikson, thanks for reaching out on the forum and for your thorough update. Great to know that you all have made so much progress on Redux Toolkit in the last year. Your top-down approach showing how to use RTK rather than why seems like a good way to go. That's exactly what I'm looking for when I read a "Quick Start" guide.

As for the rest of the tutorial, that seems like the same approach we'd like to take with these projects. Start with the bare basics and core concepts, then later refactor using a better/simpler approach, RTK in this case.

About the Tetris game, yes, I can see how it doesn't cover a lot of typical use cases for Redux. A lot of these were off the top of our heads, and aren't set in stone. We're always open to other possible projects. Our main goal is to teach the basics, and there may be a happy medium where we mention more typical use cases in the descriptions for each step to give learners something to look into later.

@sw-yx, we could definitely incorporate some sort of mock data storage. There's at least one project that uses local storage as a mock database. Would you be interested in picking up this project again? We've been busy working on the Python projects, and it will be a few months before we circle back to this one.

If either of you are free for a call, please send me an email at [email protected]. It will be great to talk about different approaches @markerikson, and to catch up with you @sw-yx.

[swyxio]

happy to, im between jobs right now and can spend some cycles on this. will email

update: we had a good chat on mar 27

todo:

• refactor to RTK
• no need for single file
• breakup to steps - https://github.com/freeCodeCamp/CurriculumExpansion/tree/master/basic-javascript-role-playing-game

[markerikson]

Hi, following up on this.

I just published a brand new "Redux Essentials" core docs tutorial. It teaches "how to use Redux, the right way", to folks who have never used Redux before, and shows use of our latest recommended APIs and approaches: Redux Toolkit, React-Redux hooks, "slice/ducks" files, etc.

I'd specifically like to see FCC's curriculum use this new Redux Essentials tutorial as a basis for whatever projects and explanations you want to show.

[scissorsneedfoodtoo]

Hi @markerikson, thanks for your patience and the update. We're working on some of the very early HTML and CSS projects at the moment, but we'll make sure to dive into the docs before we start porting this project over.

[markerikson]

Hah, I'd kinda forgotten about this :)

@jdwilkin4 : outta curiosity, what's the final resolution here?

[jdwilkin4]

HI @markerikson !

The freeCodeCamp team has decided to focus on the new vanilla JS curriculum and building out the prototypes in house.
It will be a while before the team gets to the new frontend libraries curriculum.

Once the team moves to the frontend libraries curriculum, then we will definitely revisit these earlier projects. 👍

[markerikson]

Ah. That's... a bit disappointing tbh. I do understand trying to prioritize limited resources and time (goodness knows I have enough of that problem myself), but as I understand it FCC's curriculum is still teaching legacy Redux patterns that we've deprecated years ago and don't want people learning or using for actual apps today. (Granted I haven't had time to go through the current curriculum myself to fully review it, but based on all the comments I've seen here and on Twitter I haven't seen any indication of a full revamp to teach "modern Redux" being pushed through since this first came up.)

Any viable options for getting the Redux-related material updated?

[phryneas]

Or at least a warning on the old tutorial and linking to the docs?

[jdwilkin4]

Any viable options for getting the Redux-related material updated?

I am going ping @QuincyLarson because he would be better suited to answer that 😄

[QuincyLarson]

@markerikson Would you be interested in helping us develop a more up-to-date project-oriented Redux curriculum?

[markerikson]

Interested in theory, yes :) the catch is that I've already got a ton of stuff on my plate between day job and other maintainer-ish stuff (including a mile-long list of maintainer todos I don't have time to get to), so my ability to put time into this would be very limited. But happy to start talking and see what we can figure out!