Redux is probably the most popular global state management library for react by far. It eliminates the problem of prop-drilling and lets us manage ...
For further actions, you may consider blocking this person and/or reporting abuse
App.js Using Redux...
// imports
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import {
increaseCounter,
decreaseCounter,
} from "./redux/Counter/counter.actions";
// component
function App() {
const count = useSelector((state) => state.counter.count);
const dispatch = useDispatch();
const handleIncrement = () => {
dispatch(increaseCounter());
};
const handleDecrement = () => {
dispatch(decreaseCounter());
};
return (
Current Count: {count}
handleIncrement()}>INCREMENT
handleDecrement()}>DECREMENT
);
}
// export
export default App;
This is the better way to go now - the only downside is that I liked being able to abstract the
connectfunction into acontainersfolder and import my components, then connect them in these separate containers. This allowed the component to simply expect specific props and then if you needed to remove redux, get rid of your containers and ensure your replacement adheres to the requirements laid in each components propTypes. However, I use much less redux than I used to and so I guess it's fair to use the hooks and then if I really want to swap I'll just combine reactsuseContextanduseReducerwith a couple custom hooks. Currently, I still love my redux devTools too much to drop it entirely.Lastly,
redux-devtools-extensionis deprecated. Use@redux-devtools/extensionYeah this is the best for me
I think in 2020 need use @refuxjs/toolkit , not use standart redux . What do u think about this ?
I must mention that in 2021 I would definitely use redux-toolkit instead of plain old redux with react. A blog post on redux-toolkit with react is coming soon! stay tuned
Yes, absolutely that is an option too.
How useful would vanilla Redux knowledge be when learning Redux Toolkit? Thanks very much, this blog post is amazing.
It is quite vital to have a clear mental model of how Redux works (Reducers, Actions and Types) and how data flows. This knowledge will really help understand redux-toolkit better, which is just another layer of abstraction.
Thankyou for the appreciation! 🤗 and thanks for reading.
Hello Vikrant, I put console.log() in every file and here's the order everything is firing in:
COUNTER-TYPE TRIGGERED... counter.type.js:5
COUNTER-ACTIONS TRIGGERED... counter.actions.js:18
APP.JS TRIGGERED... App.js:35
COUNTER-REDUCER TRIGGERED... counter.reducer.js:28
DEFAULT: 0 2 counter.reducer.js:23
ROOT-REDUCER... rootReducer.js:12
DEFAULT: 0 counter.reducer.js:23
STORE TRIGGERED... store.js:10
INDEX TRIGGERED... index.js:20
This is not what I expected to see at all. I was expecting index.js to be the first file triggered (instead it's the last one). This thing is bouncing all over the place. I guess that's normal for React/Redux.
I don’t get the context of your example fully, but to clear out redux basics, their documentation is the best, hands down.
@calvinbarajas Not sure either but I would like to note that if you're using
console.logthen its concurrent so the order of ops may not align with the console output aka the console may not actually be the correct order.amazing post...i did not event need to clone the repo...i just copied and pasted the codes in this post on my editor and everithing is working with no stress in less than 10minutes...lol...thanks
Hahaha, glad it was helpful :)
definitely :)
Thank you for your nice content, but i'm still confused from step 6, maybe we can use useSelector for more clear and more easy,
Yes absolutely! That is the way I would suggest in 2021. Use react-redux hooks as much as possible. The "connect" is a Higher Order Component (HOC) which is still available, but now days hooks and functional components are the way to go.
Thanks for your comment, I will update the blog with the use of hooks. 😁
So helpful thank you.
Glad I could help buddy!👐