or download extension.zip from last releases, unzip, open chrome://extensions url and turn on developer mode from top left and then click; on Load Unpacked and select the extracted folder for use
Note that starting from v2.7, window.devToolsExtension was renamed to window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__.
Hey, I'm Steven Mercatante and I build things for the web. I'm a full stack software engineer with over 15 years of experience building websites, mobile apps, APIs, CMSs, and ETL pipelines.
I don't know who out here needs to hear this but if you are replacing redux with "just context" without carefully considering your domain model and where it should live in the React tree you've just invented a worse redux
Hey, I'm Steven Mercatante and I build things for the web. I'm a full stack software engineer with over 15 years of experience building websites, mobile apps, APIs, CMSs, and ETL pipelines.
Redux is still widely used (50% of React apps), and overall usage is still growing
There are definitely lots of other options (context+hooks, GraphQL, MobX, etc) that overlap with how you'd use Redux, and that means you don't need to use it all the time the way you maybe would have before
But, there's also lots of good reasons to choose to use Redux
Overall, the important thing for any project is to know what your needs and use cases are, evaluate the tradeoffs for each option, and deliberately pick the tool that makes the most sense for that app.
Specifically to the common question of "do hooks/context kill Redux?", see these additional articles:
I do think that almost everyone should learn Redux. Not only will you probably run across projects that use it, but understanding how it works and how to use it will definitely have a major effect on how you approach solving problems.
Per your comments on the docs and Reselect/Immer:
Folks should check out our new official Redux Starter Kit package. It includes utilities to simplify several common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire "slices" of state at once without writing any action creators or action types by hand. It's powered by Immer inside, includes Reselect, and is our recommended default approach for writing Redux logic:
And finally, we're starting a major rewrite of the Redux core docs. It'll be a long-term effort, but I think we can make the docs better and easier to understand.
Hopefully that helps add some clarity. If anyone has questions, ask away!
Hey, I'm Steven Mercatante and I build things for the web. I'm a full stack software engineer with over 15 years of experience building websites, mobile apps, APIs, CMSs, and ETL pipelines.
Overall, the important thing for any project is to know what your needs and use cases are, evaluate the tradeoffs for each option, and deliberately pick the tool that makes the most sense for that app.
^ A million times, this.
Thanks for mentioning Redux Starter Kit; I should've included that in this post.
What is a greenfield project? Also you suggest learning redux but you have stopped using it and now use mobx! It's kinda confusing where you want to direct your readers.
Hey, I'm Steven Mercatante and I build things for the web. I'm a full stack software engineer with over 15 years of experience building websites, mobile apps, APIs, CMSs, and ETL pipelines.
Sorry if it's confusing. I'm recommending that folks learn Redux, but not necessarily use it for their own projects (that's completely up for you to decide.) This is coming from the point of view that React developers are likely to work on projects that use Redux (think existing client work), so knowing how to use Redux is valuable knowledge.
Thanks, it would have been more clear if you had included this in blog as well. i am just learning react and find redux very complex so i don't wanna jump into it but every project i work on use redux so i have to learn it even though there are other options like you mentioned.
Like you said, eventually, you might need to work on react+redux apps, so it's still a must to learn in my opinion for react devs out there. Context & hooks are still not as popular as redux/mobx in bigger companies who are already using react+redux/mobx. They won't change their existing large codebase because it's the new hottest thing. Maybe they will give it a shot on a greenfield, less impactful project.
I would recommend every developer to take a close look at redux and make an effort to really understand it. The library (i.e. the actual implementation) in and on itself is actually secondary in this case, but the concept (single-directional data flow + persistent data structures) is very powerful and a useful tool to have on your belt in many other cases, even outside UI and Javascript. I feel that I learned a lot about proper data flow by studying it, and I'm not even a real frontend developer.
Nice post! thanks for sharing it, i'm actually using react, redux and node.js in my actual job and i really enjoy a lot using redux and redux devtools.
Hey, I'm Steven Mercatante and I build things for the web. I'm a full stack software engineer with over 15 years of experience building websites, mobile apps, APIs, CMSs, and ETL pipelines.
Hey, I'm Steven Mercatante and I build things for the web. I'm a full stack software engineer with over 15 years of experience building websites, mobile apps, APIs, CMSs, and ETL pipelines.
"Better" is subjective per project. Sometimes Redux is the right choice, sometimes it's not. Hooks & context aren't messy in and of themselves; they're tools (just like Redux, MobX, etc.)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
One thing I'd also add about redux is the amazing tooling via the Redux DevTools.
Redux DevTools extension.
Redux DevTools Extension
Installation
1. For Chrome
extension.zip
from last releases, unzip, openchrome://extensions
url and turn on developer mode from top left and then click; onLoad Unpacked
and select the extracted folder for usenpm i && npm run build:extension
and load the extension's folder./build/extension
;npm i && npm start
and load the extension's folder./dev
.2. For Firefox
npm i && npm run build:firefox
and load the extension's folder./build/firefox
(just select a file from inside the dir).3. For Electron
REDUX_DEVTOOLS
in electron-devtools-installer.4. For other browsers and non-browser environment
Usage
1. With Redux
1.1 Basic store
…
The Redux devtools is amazing. I have nothing but good things to say about it.
I think this is fitting as well
Ha! I was wondering if I should add that to this post when I was writing it. I could've used you as an editor!
But yes, Jani makes a great point.
Hi, I'm a Redux maintainer. I know you know my opinion already, but I wanted to pop in and offer my thoughts for anyone else reading this post.
First, related to the "Redux is dead" meme: I specifically addressed this in my Reactathon 2019 talk on "The State of Redux" and my post Redux - Not Dead Yet!. The TL;DR version is:
Specifically to the common question of "do hooks/context kill Redux?", see these additional articles:
I do think that almost everyone should learn Redux. Not only will you probably run across projects that use it, but understanding how it works and how to use it will definitely have a major effect on how you approach solving problems.
Per your comments on the docs and Reselect/Immer:
Folks should check out our new official Redux Starter Kit package. It includes utilities to simplify several common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire "slices" of state at once without writing any action creators or action types by hand. It's powered by Immer inside, includes Reselect, and is our recommended default approach for writing Redux logic:
redux-starter-kit.js.org
And finally, we're starting a major rewrite of the Redux core docs. It'll be a long-term effort, but I think we can make the docs better and easier to understand.
Hopefully that helps add some clarity. If anyone has questions, ask away!
Hi Mark, thanks for chiming in!
^ A million times, this.
Thanks for mentioning Redux Starter Kit; I should've included that in this post.
What is a greenfield project? Also you suggest learning redux but you have stopped using it and now use mobx! It's kinda confusing where you want to direct your readers.
Sorry if it's confusing. I'm recommending that folks learn Redux, but not necessarily use it for their own projects (that's completely up for you to decide.) This is coming from the point of view that React developers are likely to work on projects that use Redux (think existing client work), so knowing how to use Redux is valuable knowledge.
Thanks, it would have been more clear if you had included this in blog as well. i am just learning react and find redux very complex so i don't wanna jump into it but every project i work on use redux so i have to learn it even though there are other options like you mentioned.
A greenfield project means a brand new project, as in not based on existing code.
Like you said, eventually, you might need to work on react+redux apps, so it's still a must to learn in my opinion for react devs out there. Context & hooks are still not as popular as redux/mobx in bigger companies who are already using react+redux/mobx. They won't change their existing large codebase because it's the new hottest thing. Maybe they will give it a shot on a greenfield, less impactful project.
Anyway, nice article! :)
I would recommend every developer to take a close look at redux and make an effort to really understand it. The library (i.e. the actual implementation) in and on itself is actually secondary in this case, but the concept (single-directional data flow + persistent data structures) is very powerful and a useful tool to have on your belt in many other cases, even outside UI and Javascript. I feel that I learned a lot about proper data flow by studying it, and I'm not even a real frontend developer.
Nice post! thanks for sharing it, i'm actually using react, redux and node.js in my actual job and i really enjoy a lot using redux and redux devtools.
Glad to hear you’re enjoying it. Have you tried Reselect or Immer with Redux?
Yes! i used reselect to optimize my React/Redux apps!
Why not? I there any better alternative? In my opinion the "hooks & context" solution doesn't help, it generates code mess.
"Better" is subjective per project. Sometimes Redux is the right choice, sometimes it's not. Hooks & context aren't messy in and of themselves; they're tools (just like Redux, MobX, etc.)