Redux screencast series on Egghead

[gaearon]

If you're following Redux repo but haven't dived into it yet, or are confused about some of its fundamental aspects, you'll be happy to learn that Egghead has just published my Getting Started with Redux series.

It covers the same topics as the “Basics” part of the docs, but hopefully dives a little bit deeper and ensures you really understand the Redux fundamentals.

I plan to create more content about Redux on Egghead—this time, for subscribers only. It will feature more advanced topics. If you have particular suggestions, please let me know in this thread!

• Getting Started with Redux (30 videos)

[stormpat]

:+1:

[smashercosmo]

1. Local component's state vs. global state
2. Action handled by multiple reducers vs. 1-to-1 action-reducer relation
3. Handling action chains (especially async ones), when second action should be triggered right after the first one is finished.
4. Optimization technics to prevent unnecessary rerenering (batching actions, reselect etc.).

[iZaL]

:+1:

[dchambers]

I've just watched the first 16 episodes in the series and think they're an excellent resource that we'll likely be using for internal training at the company I work for. However, the fact you only ever used plain objects and deep-freeze for your state-tree, and never use or refer to immutable libraries like immutable-js makes me wonder if you are encouraging people down this path, or whether this just makes presenting the ideas easier?

Would be great to know your thoughts on this.

[gaearon]

Throwing Immutable into the mix would confuse beginners who'd need to learn to differentiate between Redux and Immutable API, may assume Immutable is required, etc. It's a good idea for a couple of advanced lessons though!

[dchambers]

Throwing Immutable into the mix would confuse beginners who'd need to learn to differentiate between Redux and Immutable API, may assume Immutable is required, etc. It's a good idea for a couple of advanced lessons though!

Okay, makes sense. Just good to know your thinking behind this decision :-).

[cateland]

What @smashercosmo said :+1:

[wpannell]

Unit testing. TDD.

[Restuta]

What @cateland said :+1:

[nikek]

I must say I’m very impressed by you skill set, being able to create excellent js libraries with extensive documentation and concise tutorials in this manner.

After viewing all the videos I have a bunch of feedback on the specific videos that I’ll send by mail. The conclusion though is that this is so much more than an introduction to Redux. You cover code practices and component architecture and more. It is really really awesome and very pedagogical. I think the videos can be divided into three groups though. Redux basic, redux behind the scenes, and redux with react.

For upcoming videos I’d like to see less react specific concepts and more on async actions and tests.

Remarkably well done, keep it up! :)

[raquelxmoss]

In video 21 you note that the TodoApp component no longer needs to be a class, it can be a function. It would be great if you could explain how you came to this realisation -- why is this a suitable candidate to be a functional component, and what benefit does this give?

[harmony7]

This is so good.

Item 3 in @smashercosmo 's list is something I'd like to know as well.

[nathanielks]

what @wpannell said! Unit Testing/TDD!

Would also love to see videos on the topics covered in the Advanced docs.

[gaearon]

What specifically are you interested in with regards to unit testing? Lessons 5, 11, 12 give an idea of how to unit test the reducers.

[nathanielks]

...that's a good question. Would the process change very much when they're mocha tests?

[gaearon]

Not really. But I guess that's a good topic for a series of advanced lessons. Unit testing reducers, action creators, components etc.

[farzd]

Firstly, great videos. Already understand redux but it was refreshing. If you're creating more advanced videos, may i suggest async actions / middleware. Don't think unit testing really needs any coverage. You can just called your reducer functions and assert on them?

[nathanielks]

Yeah, I guess it really isn't much else other than wrapping the expects in mocha tests. :thumbs up:

Thankfully everything is so simple!

[mikebarnhardt]

Immutability with object ID hashes (e.g. [post._id]: {...post}).

I find myself relying too heavily on a reduce function to take an array of API entities and produce an ID hash with it. I know that normalizr will handle some of this, but I'd like videos similar to the EggheadIO videos where you take us from point A to B. It is not solely a Redux-based thing, but is heavily intertwined.

[gaearon]

@raquelxmoss

In video 21 you note that the TodoApp component no longer needs to be a class, it can be a function. It would be great if you could explain how you came to this realisation -- why is this a suitable candidate to be a functional component, and what benefit does this give?

That was actually some sloppy lesson planning on my part. I didn't realize until too late that I could've made it a functional component from the very start. The benefit for using functions over classes is simplicity, so do this anytime you can. Basically if you don't need lifecycle hooks like componentDidMount or state, use functional components.

[harmony7]

I would find a lesson on how we can split these pieces of code up into an actual directory structure to be helpful. I know that as long as everything is there it's probably going to work but maybe recommended conventions of naming folders (component / container / store / reducer etc), what kinds of files go into which folder, and so on would be nice.

[mikebarnhardt]

I'd also like advanced reducer composition.

[sompylasar]

Reusing complex components (that are comprised of a reducer or multiple reducers, a set of actions, action creators, maybe accessing some server-side API, several React components -- like redux-form, but more real-app-specific). This also includes organizing modular directory structure.

[cbenz]

Watched the whole thing, very good! I appreciated the use of ES6/7 syntax (Object.assign-like), React 0.14 function components and avoiding Immutable things.

Perhaps a video explaining the recommended code architecture.

And updating the doc to use ES6/7 syntaxes? (are PR welcome in that direction?)

[SpencerCDixon]

Unit testing, creating API Middleware, doing OAuth/some type of user authentication with Redux, using Immutable with redux (how to get it set up, best practices etc.)

[tbloncar]

This series serves as a great introduction to Redux, the single-atom state, and related philosophies. I thought you did a nice job of homing in on the core principles whilst avoiding inducing cognitive overload. The environment you worked in is also easily replicable, which makes the hands-on portion all the more approachable.

[sompylasar]

@gaearon What do you think of structuring actions in the example videos as a wannabe-standard { type: string, payload: Object } right from the beginning? I'm talking about the counter list example, where the payload is put onto the action object itself; { type: string, index: number }. This looks like an anti-pattern to me.

[gaearon]

What do you think of structuring actions in the example videos as a wannabe-standard { type: string, payload: Object } right from the beginning? I'm talking about the counter list example, where the payload is put onto the action object itself; { type: string, index: number }. This looks like an anti-pattern to me.

It's not an anti-pattern in any way. It's a normal action object. FSA is fine but it's a convention. Nothing in Redux itself depends on or benefits from this convention, so we don't want to enforce it.

People used to think all sorts of magic things about payload, source in original Flux documentation. They blindly copied these things without understanding why they exist and carefully assessing whether they even need them. Later they complained about Flux being complex and verbose, when really in many cases they copied the verbose (but non-essential) parts themselves.

In these lessons I only teach the essential parts of Redux. Note how I don't introduce constants—because people concentrate on them too much, and miss that they don't really matter. You're more likely to understand the benefits of constants after you make a few typos in strings, rather than if I put them into the tutorial videos from the start. I think the same goes for other conventions like FSA—by all means, use it if you find it convenient, but I won't preach it if the lessons don't demand it.

[sompylasar]

@gaearon OK, I'm with you then, in hope that those who got used to the simple unstructured approach won't make bigger apps unmanageable by not applying any convention.

[gaearon]

@sompylasar

I think examples display conventions better than video tutorials. Examples is the opinionated land of “here’s how I’m going to structure some code around those principles”, and videos are about those principles themselves. This is why you’ll see different conventions in different examples, and before starting a project most people look through different examples to get a taste for different ways to do that.

Also, there’s absolutely nothing unstructured about not following FSA. { type: 'STUFF', id: 1 } is not inherently worse than { type: 'STUFF', payload: { id: 1 } }. It’s just a matter of taste and (sometimes) tooling convention. Keeping action objects payloadless is not making them harder to work with.

[joelhooks]

We've got a handful of redux unit testing lessons coming out soon on egghead 😄

We held off ANY Redux lessons for some time in order for Dan to have first crack. Totally worth the wait, and then some.

"Build an Application with Idiomatic Redux" would be a wonderful advanced course 👍

[nathanielks]

@joelhooks those both sound amazing!

[kevinrenskers]

I'd like to see you setup a project using webpack and hot reloading instead of using jsbin. Take this into the real world. I know it's not specific to redux but I think it would fit well and you're the right man to teach this :)

[nathanielks]

@kevinrenskers it's not a video series, but if you feel like dissecting something, there are a few really great example boilerplates you can reference!

[badnorseman]

Those who have asked for a project structure for Dan's example and Webpack configuration.

Please check this out https://github.com/urbanvikingr/todo.

I've committed to update Redux with React doc to be aligned with Dan's code from the videos. It'll be done within next two weeks - my Holiday project :) - stay tuned.

My wish list to Egghead.io videos: action / reducer testing with Jasmine deep-dive on middleware (thunk / promises)

[grigio]

The screencasts are a very useful introduction to Redux. What I'd like hear is the Redux-way to do routing and server-side rendering

[badnorseman]

@grigio You might interested in this discussion https://github.com/rackt/redux/issues/1145 about routing

[grigio]

@urbanvikingr thanks, subscribed. The poll seems closed, but I would have voted #1168

[jugimaster]

The lessons are actually pretty good, but it's distracting that when you say "store", it sounds like "chore".

Everyone here has noticed and been distracted by it. They're just too politically correct to bring it up. So yeah, I decided to be that guy, in case no one else ever would :)

[gaearon]

I'll get better at speaking English eventually. For now this is the best I can do ;-)

[badnorseman]

@gaearon You have done a damn good job in explaining Redux. Kudos to you and your open source achievements.

[ianstormtaylor]

Amazing set of lessons. I especially liked how you re-implemented each of the core Redux functions from scratch in a "read the source" way. Seconding someone else who was impressed at how clear the tutorials and all of the documentation is for Redux. So far, as as someone catching up on two years of frontend advancements, the concepts have been hard to wrap my mind around, but the docs have been amazingly helpful at doing so. Keep it up, and thanks!

(Also don't listen to @jugimaster, not everyone was distracted by your accent and was "too politically correct to bring it up", or even cared that you have an accent.)

[jugimaster]

@ianstormtaylor It's not an accent, by the way :)

I didn't "care" either, but I sure was distracted!

But on the other hand, as someone who's studied six foreign languages, I have always cared about speaking a language correctly, and to that end, I personally appreciate someone pointing out my mistakes.

[trevordmiller]

Hey @gaearon,

Absolutely loved your course. Nice work! It was very helpful.

I added three Redux testing video lessons to my recent Egghead course: https://egghead.io/series/react-testing-cookbook

My hope is they will be complimentary to all the amazing work you have done!

[viatsko]

Solid course!

Improves not only Redux knowledge but modern practices knowledge overall! Keep on doing such a good stuff :+1: :tada:

[ezekielchentnik]

hey, just realized there is not a link/reference to the code in the videos. Maybe obvious, and perhaps, simple enough users could just copy the videos; but I think a lot of folks could benefit from a repos with the exact code in the videos- why not?

[gaearon]

Code snippets for every lesson are available to Egghead subscribers. :-) The videos are free but the platform’s gotta make money so it can invest into more courses, send equipment to the instructors, host the videos, improve the website, and so on.

That said we have an examples/todos folder that pretty much matches the course.

[ezekielchentnik]

... cool, I'm missing it then? Looking for link(s) ...

[ezekielchentnik]

@gaearon apologizes, just revisited the videos. the code is right there :)... watched the videos, bought membership, watched others... just went back to the redux videos actually logged in. cheers.

[gaearon]

By the way, a few people complained that transcripts are inaccurate. Please send PRs to fix them: https://github.com/eggheadio/egghead-redux-transcripts