Hey there Beautiful person!
Some context
Recently I started working on a web project and decided to use Redux for state management, as it is going to be a rather big project and I wanted to learn Redux along the way.
So I went to the Redux website to get started and oh boy was I blown with a tsunami of overwhelming information.
In the beginning, I just knew I wanted to use redux for my state management and thought "yea easy... let me just hop on there and start learning redux"
little did I know I'd first need to know what I needed to learn in the redux ecosystem before even starting to learn any of the multiple products (3 to be exact) involved in this ecosystem.
well luckily for you, I've gone through the hassle of understanding these different packages so you won't have to start from scratch or be overwhelmed as I was.
now going straight to the subject of the matter,
Redux
Redux is a state management framework for javascript applications that manages and stores the application's in a predictable way.
Now Redux is the base of everything. I would advise getting at least the bases and understanding its concepts and terminologies. for that here Is a youtube playlist that tremendously helped me codevolution.
While it might have been published in 2019, I personally went through it, and I love the way the course is Structured and aimed at getting you to understand intuitively the redux pattern.
Redux Toolkit is a wrapper over Redux, it is the recommended way of writing redux code since it has a lot of advantages over writing code in plane Redux (I guess..??).
Redux Toolkit is just built upon Redux. It reduces the amount of boilerplate code you need to write to get started with a Redux project and so it makes it easier to use Redux.
So since it is just a wrapper, it is not obligatory to use, you might still do well without it entirely, but if you want to make your life easier I'd recommend learning it too. Here is a youtube playlist that helped me with understanding Redux Toolkit codevolution.
React-Redux is a package written by the Redux team to facilitate the integration of Redux with React js components. it makes it so easy to retrieve and set state from the redux store and automatically update the UI as you would expect. This package is for my React.js guys, but as you might already know, Redux as a framework is not tightly coupled to react. the React-Redux package is just a third-party package written by the Redux team to ease integration with React js. both of the youtube playlists recommended above get into React-Redux at the end.
Note, you can use a combination of React-Redux and Redux, or React-Redux and Redux-toolkit for your react projects
Bonus (Next-React-Wrapper)
Okay, you might be going " hey Mawit, you said there are 3 packages in the redux ecosystem, where does 'Next-React-Wrapper' come from?? huh?? "
well fellow, let me explain.
Actually, using Redux in Next js seems to be a little more complicated, I mean, when you intend to use the State's values on the server side functions like getServerSideProps or GetStaticProps. so someone decided to start an open-source project that would help with just that. this package is not maintained by the redux team themselves ( I might be wrong) and that's why it doesn't appear on Redux's website.
Now, personally, I haven't really used it yet, though it seems to be important too, I just want to bring it to your attention, so it's up to you what you want to do with the awareness.
You should also understand that Next-React-wrapper is not mandatory for every Next.js app. as long as all your state management is run on the client side I think you are still fine without it.
So there you go guys, I hope this was helpful to you, I hope this was worth your time, and till next time, Happy coding.
![Lucky yougif](https://media3.giphy.com/media/KfwyWfTwMu1FG0XhO8/giphy.gif?cid=790b7611677b6e055103fab83f1d4e284768336b8e2ac8e3&rid=giphy.gif&ct=g")
