6 ms·

The patterns shown in this tutorial are outdated and not what we currently recommend. "Modern Redux" code is very different than what this and other older tutor

The patterns shown in this tutorial are outdated and not what we currently recommend. "Modern Redux" code is very different than what this and other older tutorials show. We've introduced newer APIs like Redux Toolkit, which is a set of utilities that provide a light abstraction to simplify the most common Redux tasks, and the React-Redux hooks API, which is generally easier to use than the traditional connect API. I strongly recommend reading through the newly rewritten official tutorials in the Redux docs, which have been specifically designed to teach you how Redux works and show our recommended practices: - "Redux Essentials" tutorial [0]: teaches "how to use Redux, the right way", by building a real-world app using Redux Toolkit - "Redux Fundamentals" tutorial [1]: teaches "how Redux works, from the bottom up", by showing how to write Redux code by hand and why standard usage patterns exist, and how Redux Toolkit simplifies those patterns The older patterns shown in almost all other tutorials on the internet are still valid, but not how we recommend writing Redux code today. You should also read through the Redux "Style Guide" docs page [2], which explains our recommended patterns and best practices. Following those will result in better and more maintainable Redux apps. In addition, the easiest way to start a new project is with the official Redux+JS template for Create-React-App [3]. It comes with Redux Toolkit and the React-Redux hooks API already set up when the project is created. [0] https://redux.js.org/tutorials/essentials/part-1-overview-concepts https://redux.js.org/tutorials/essentials/part-1-overview-co... [1] https://redux.js.org/tutorials/fundamentals/part-1-overview https://redux.js.org/tutorials/fundamentals/part-1-overview [2] https://redux.js.org/style-guide/style-guide https://redux.js.org/style-guide/style-guide [3] https://github.com/reduxjs/cra-template-redux https://github.com/reduxjs/cra-template-redux

rglover 6y ago
My goal here is to offer an approachable introduction. Unfortunately, there's a lot to dig through in the official tutorials and docs which can be overwhelming. If you're experienced that's fine, but I try to keep my tutorials accessible to both beginners and advanced devs. The latter being the group that can benefit more from a blessed path as they've had the pre-requisite experience to understand the basic mechanics. What I've presented here is a working solution that (I hope) is approachable, though may not be the blessed path.
- acemarke 6y ago
  My point is that the code that shown in this tutorial is, from our point of view, "wrong" at this stage. We _don't_ want people writing action constants, object spreads, or action creators by hand any more, or splitting Redux code across separate files for "actions, constants, and reducers". We _do_ want them using Redux Toolkit as the standard approach for writing Redux logic. Similarly, while `connect` still works, we really want people using the hooks API instead. I obviously can't change the thousands of Redux tutorials that are out there already, but I really want any new tutorials written in 2021+ to be following the patterns we recommend. Using these recommended patterns results in code that is shorter, it's easier to understand, and eliminates many common bugs that we've seen over the years.
  - rglover 6y ago
    > My point is that the code that shown in this tutorial is, from our point of view, "wrong" at this stage. That's a bummer because, to be frank, the abstractions introduced by that toolkit are anything but easy to understand. This is incredibly alienating compared to the block above it which, at the very least, clearly uses the redux package (which maps to the mental model of a beginner—if I'm using Redux, I expect to see something called Redux): https://redux.js.org/introduction/getting-started#redux-toolkit-example https://redux.js.org/introduction/getting-started#redux-tool... You even say it here: > This architecture might seem like a lot for a counter app, but the beauty of this pattern is how well it scales to large and complex apps. There's a big gap between a large and complex app and the basic parts required to comprehend what Redux is doing and why it's valuable. It sounds like you'll disagree with me but there's a ton of value in starting with the simple parts to explain the concepts (the "wrong" stuff) and then building on top of that with what the toolkit introduces. A good flow would be: 1. What is Redux? 2. What are the basic mechanics of Redux? 3. How do I build a basic Redux app? 4. How do I refactor my basic app to support a larger, complex app? Skipping straight to #4 may make sense from your perspective (assuming you're at Facebook or another large-codebase company), but from the viewpoint of a developer who's just trying to get up to speed, it's a bat to the head.
    - 6y ago

rglover 6y ago

My goal here is to offer an approachable introduction. Unfortunately, there's a lot to dig through in the official tutorials and docs which can be overwhelming. If you're experienced that's fine, but I try to keep my tutorials accessible to both beginners and advanced devs. The latter being the group that can benefit more from a blessed path as they've had the pre-requisite experience to understand the basic mechanics. What I've presented here is a working solution that (I hope) is approachable, though may not be the blessed path.

acemarke 6y ago
My point is that the code that shown in this tutorial is, from our point of view, "wrong" at this stage. We _don't_ want people writing action constants, object spreads, or action creators by hand any more, or splitting Redux code across separate files for "actions, constants, and reducers". We _do_ want them using Redux Toolkit as the standard approach for writing Redux logic. Similarly, while `connect` still works, we really want people using the hooks API instead. I obviously can't change the thousands of Redux tutorials that are out there already, but I really want any new tutorials written in 2021+ to be following the patterns we recommend. Using these recommended patterns results in code that is shorter, it's easier to understand, and eliminates many common bugs that we've seen over the years.
- rglover 6y ago
  > My point is that the code that shown in this tutorial is, from our point of view, "wrong" at this stage. That's a bummer because, to be frank, the abstractions introduced by that toolkit are anything but easy to understand. This is incredibly alienating compared to the block above it which, at the very least, clearly uses the redux package (which maps to the mental model of a beginner—if I'm using Redux, I expect to see something called Redux): https://redux.js.org/introduction/getting-started#redux-toolkit-example https://redux.js.org/introduction/getting-started#redux-tool... You even say it here: > This architecture might seem like a lot for a counter app, but the beauty of this pattern is how well it scales to large and complex apps. There's a big gap between a large and complex app and the basic parts required to comprehend what Redux is doing and why it's valuable. It sounds like you'll disagree with me but there's a ton of value in starting with the simple parts to explain the concepts (the "wrong" stuff) and then building on top of that with what the toolkit introduces. A good flow would be: 1. What is Redux? 2. What are the basic mechanics of Redux? 3. How do I build a basic Redux app? 4. How do I refactor my basic app to support a larger, complex app? Skipping straight to #4 may make sense from your perspective (assuming you're at Facebook or another large-codebase company), but from the viewpoint of a developer who's just trying to get up to speed, it's a bat to the head.
  - 6y ago