4 ms·

Hey, I wrote this! Neat to see that someone else submitted here. I spent a _lot_ of time and effort trying to put this together [0]. The existing tutorial se

Hey, I wrote this! Neat to see that someone else submitted here. I spent a _lot_ of time and effort trying to put this together [0]. The existing tutorial sequence has been read by a lot of people over the years, but it takes a "bottom-up" approach: it teaches how each of the Redux pieces work in isolation, and builds up from there. That tutorial is also one of the oldest parts of our docs, and it was written in a much different era for a different audience: when "Flux" was still a thing, and people were looking at migrating away from Backbone. This new "Redux Essentials" tutorial has several goals: - It takes a "top-down" approach, with a focus on "how to use Redux, the right way", rather than "how it works". - It teaches our latest recommended patterns and practices, like using our official Redux Toolkit package [1] for writing your Redux logic, and using the React-Redux hooks API [2] instead of the earlier `connect` API. - It shows how to build a somewhat more realistic example app, and explains various Redux concepts and APIs as we add new features. - Improve explanations and make it more clear how Redux integrates into a typical React app, and how data flows through a Redux application. I'm hopeful that this new tutorial will make it easier for people to jump right into learning Redux and building something useful with it, and they can look more into "how does it work inside?" later. The new tutorial is part of my ongoing effort to rewrite most of the Redux docs [3]. I'd previously written the new "Redux Style Guide" docs page [4], which lists our recommended best practices. My next task is to rewrite the existing "Basics/Advanced" tutorial sequence [5]. My plans for that section 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 - Improve explanation flow If anyone's got any feedback, suggestions, or questions, let me know! [0] https://github.com/reduxjs/redux/pull/3740#issuecomment-650847906 https://github.com/reduxjs/redux/pull/3740#issuecomment-6508... [1] https://redux-toolkit.js.org https://redux-toolkit.js.org [2] https://react-redux.js.org/api/hooks https://react-redux.js.org/api/hooks [3] https://github.com/reduxjs/redux/issues/3592 https://github.com/reduxjs/redux/issues/3592 [4] https://redux.js.org/style-guide/style-guide https://redux.js.org/style-guide/style-guide [5] https://github.com/reduxjs/redux/issues/3595#issuecomment-557760741 https://github.com/reduxjs/redux/issues/3595#issuecomment-55...

DangitBobby 6y ago
Thank you for doing this! When I was first learning React/Redux, I found the Redux documentation to be pretty much useless for trying to understand how it fit into the bigger picture of my application. 3rd party tutorials saved my bacon on that front. This, on the other hand, looks like a very clear walkthrough of how to use Redux. So again, thanks and kudos.
- acemarke 6y ago
  Yeah. We've had a lot of very positive compliments about the Redux docs over the years, but at the same time I also see a lot of weaknesses and ways they can be improved (hence the docs rewrite effort). One of the biggest gaps has been info on real world usage. Thus far, it's kinda been "here's a todo app, here's some basic data fetching... go have fun!". The "Recipes" section has some useful info, but it's not a coherent larger walkthrough. If you look at that "docs rewrite overview" issue, I want to specifically add a new "Real World Usage" section that contains both some of the existing "Recipes" material with better organization, and new material with practical advice on app structure and practices. Of course, since it's _only_ me working on the docs atm, this could take a while :) I'd really appreciate other folks from the community jumping in to help out with the docs work.
y2bd 6y ago
How would you recommend testing components that use the `useSelector/useDispatch` hooks internally?
- acemarke 6y ago
  The React ecosystem has a whole has moved towards a more "integration"-ish approach towards testing components. There's multiple reasons for this: - Kent C Dodds is a strong proponent of that approach, and teaches it in his materials on how to write tests. He also created the React Testing Library lib, which has picked up a lot of adoption in the community. (Enzyme has struggled to keep up with some of the newer features in React, which has led to a number of folks switching to RTL as well.) - Hooks in general push you towards a different set of tradeoffs for how your components read data. Related to that, the concept of "container components" isn't completely useless, but the community always over-obsessed about that idea. I specifically talked about some of the differences in mental models and tradeoffs in my post "Thoughts on React Hooks, Redux, and Separation of Concerns" [0], and my ReactBoston 2019 talk on "Hooks, HOCs, and Tradeoffs" [1]. So, the RTL docs suggest that you should test Redux-using components by writing a reusable function to "render components with a Redux store + Provider wrapped around them" [2], and we just merged a PR to the Redux docs that shows that same approach [3]. [0] https://blog.isquaredsoftware.com/2019/07/blogged-answers-thoughts-on-hooks/ https://blog.isquaredsoftware.com/2019/07/blogged-answers-th... [1] https://blog.isquaredsoftware.com/2019/09/presentation-hooks-hocs-tradeoffs/ https://blog.isquaredsoftware.com/2019/09/presentation-hooks... [2] https://testing-library.com/docs/example-react-redux https://testing-library.com/docs/example-react-redux [3] https://redux.js.org/recipes/writing-tests#connected-components https://redux.js.org/recipes/writing-tests#connected-compone...

DangitBobby 6y ago

Thank you for doing this! When I was first learning React/Redux, I found the Redux documentation to be pretty much useless for trying to understand how it fit into the bigger picture of my application. 3rd party tutorials saved my bacon on that front. This, on the other hand, looks like a very clear walkthrough of how to use Redux. So again, thanks and kudos.

acemarke 6y ago
Yeah. We've had a lot of very positive compliments about the Redux docs over the years, but at the same time I also see a lot of weaknesses and ways they can be improved (hence the docs rewrite effort). One of the biggest gaps has been info on real world usage. Thus far, it's kinda been "here's a todo app, here's some basic data fetching... go have fun!". The "Recipes" section has some useful info, but it's not a coherent larger walkthrough. If you look at that "docs rewrite overview" issue, I want to specifically add a new "Real World Usage" section that contains both some of the existing "Recipes" material with better organization, and new material with practical advice on app structure and practices. Of course, since it's _only_ me working on the docs atm, this could take a while :) I'd really appreciate other folks from the community jumping in to help out with the docs work.

y2bd 6y ago

How would you recommend testing components that use the `useSelector/useDispatch` hooks internally?

acemarke 6y ago
The React ecosystem has a whole has moved towards a more "integration"-ish approach towards testing components. There's multiple reasons for this: - Kent C Dodds is a strong proponent of that approach, and teaches it in his materials on how to write tests. He also created the React Testing Library lib, which has picked up a lot of adoption in the community. (Enzyme has struggled to keep up with some of the newer features in React, which has led to a number of folks switching to RTL as well.) - Hooks in general push you towards a different set of tradeoffs for how your components read data. Related to that, the concept of "container components" isn't completely useless, but the community always over-obsessed about that idea. I specifically talked about some of the differences in mental models and tradeoffs in my post "Thoughts on React Hooks, Redux, and Separation of Concerns" [0], and my ReactBoston 2019 talk on "Hooks, HOCs, and Tradeoffs" [1]. So, the RTL docs suggest that you should test Redux-using components by writing a reusable function to "render components with a Redux store + Provider wrapped around them" [2], and we just merged a PR to the Redux docs that shows that same approach [3]. [0] https://blog.isquaredsoftware.com/2019/07/blogged-answers-thoughts-on-hooks/ https://blog.isquaredsoftware.com/2019/07/blogged-answers-th... [1] https://blog.isquaredsoftware.com/2019/09/presentation-hooks-hocs-tradeoffs/ https://blog.isquaredsoftware.com/2019/09/presentation-hooks... [2] https://testing-library.com/docs/example-react-redux https://testing-library.com/docs/example-react-redux [3] https://redux.js.org/recipes/writing-tests#connected-components https://redux.js.org/recipes/writing-tests#connected-compone...