Advice and resources for getting started with Redux
When Should I Learn Redux?
Our recommendation is to focus on learning React itself very well first. Once you have a good grasp on React, you'll have a better understanding of why a state management library like Redux can be useful. Also, while Redux is simple in some ways, it can be complex in others, and it can have a steep-ish learning curve depending on your background.
Redux may not seem very useful with small or toy apps. The typical example is a Todo list, but that's just to illustrate the basic mechanics and data flow. At that level, the benefits of Redux aren't very apparent, and the amount of overhead will definitely seem large. But, once you understand the principles, you can consistently apply them no matter how big an app is.
If you're not sure whether you should learn Redux yet, here's some suggested resources:
- Robin Wieruch has a great post called 8 things to learn in React before using Redux. He also wrote a list of Tips to learn React + Redux in 2017.
- The Redux FAQ has an entry on When should I use Redux?. The FAQ entry points to several other quotes about when you might want to use Redux, and specifically three related articles:
- Dan Abramov's post The Case for Flux, which describes when a Flux-like library is useful in general
- Dan later wrote a post called You Might Not Need Redux, which talks about the tradeoffs Redux asks you to make, and the benefits you get in return. He also emphasizes that it doesn't fit every use case.
- I co-wrote a post on reasons why Redux can be useful in a React app
Suggested Resources for Learning Redux
Once you are ready to learn Redux, start with the official docs at http://redux.js.org/ , and watch Dan Abramov's tutorial videos on Egghead.io.
We've recently created a new official package called Redux Toolkit, which is intended to help simplify common tasks like setting up a Redux store and writing immutable update logic in reducers. I highly recommend that you try it out.
We also now have a new published official docs site for React-Redux at https://react-redux.js.org.
I gave a 45-minute "Redux Fundamentals" presentation at Reactathon 2018, which includes links to both the video of the talk and the slides.
I've also put the slides and exercises for my "Redux Fundamentals" workshop online. It's a greatly expanded version of the material from the Reactathon presentation.
From there, my React/Redux links list has a large section of Redux tutorials, as well as sections on Redux Reducers and Selectors, Redux Architecture, and Redux Side Effects, and a lot more.
Since there's a lot of articles in my list, I'll highlight a few:
- Dave Ceddia's post A Complete React Redux Tutorial for 2019 is an extensive, friendly, and clearly-written intro to the basics of Redux and how to use it with React. (You may also want to check out his earlier posts What Does Redux Do? (and when should you use it?) and How Redux Works: A Counter-Example.)
- Tania Rascia wrote Using Redux with React: Complete Tutorial with Real-World Examples, which quickly introduces Redux, React-Redux, Redux Toolkit, and the React-Redux
connectand hooks APIs
- Jake Smith's React and Redux: An Introduction is a nice shorter intro that covers the same basic concepts.
- Valentino Gagliardi's post React Redux Tutorial for Beginners: Learning Redux in 2018 is an excellent extended introduction to many aspects of using Redux
- The CSS Tricks article Leveling Up with React: Redux covers the Redux basics well
- This DevGuides: Introduction to Redux tutorial covers several aspects of Redux, including actions, reducers, usage with React, and middleware.
If you want to see how Redux fits into a somewhat larger application, I can recommend this 8-part "Build a Simple CRUD App with React and Redux" series, and my own "Practical Redux" tutorial series.
And finally, my "Idiomatic Redux" series has articles that go deeper into different Redux usage patterns, the history and intent behidn Redux's design, and what I consider to be the right ways to use Redux.
This is a post in the Blogged Answers series. Other posts in this series:
- Aug 02, 2017 - Blogged Answers: Webpack HMR vs React-Hot-Loader
- Dec 18, 2017 - Blogged Answers: Resources for Learning React
- Dec 18, 2017 - Blogged Answers: Resources for Learning Redux
- Mar 29, 2018 - Blogged Answers: Redux - Not Dead Yet!
- Jan 19, 2019 - Blogged Answers: Debugging Tips
- Jul 10, 2019 - Blogged Answers: Thoughts on React Hooks, Redux, and Separation of Concerns
- Nov 26, 2019 - Blogged Answers: Learning and Using TypeScript as an App Dev and a Library Maintainer
- Jan 01, 2020 - Blogged Answers: A Comparison of Redux Batching Techniques
- Jan 01, 2020 - Blogged Answers: Reasons to Use Thunks
- Jan 01, 2020 - Blogged Answers: Years in Review, 2018-2019
- Jan 19, 2020 - Blogged Answers: React, Redux, and Context Behavior
- Feb 22, 2020 - Blogged Answers: Coder vs Tech Lead - Balancing Roles
- Feb 22, 2020 - Blogged Answers: Why Redux Toolkit Uses Thunks for Async Logic
- May 12, 2020 - Blogged Answers: Why I Write
- May 17, 2020 - Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior
- Jun 21, 2020 - Blogged Answers: React Components, Reusability, and Abstraction