The frontend world is moving so fast these days. The hottest trend is React along with the Flux pattern. Flux is a architectural pattern introduced by Facebook to solve some of the problems in large data centric applications. Facebook introduced flux as a concept, but there’re number of flux libraries born from then. Today we’re gonna talk about the most popular library in that category named Redux.
Why this post:
If you follow the egghead.io videos from @dan_abramov, you might feel that Redux is super simple. But then if you try to follow the examples from different sources, you might be overwhelmed by the terms like
bindActionCreators ..etc. I was trying to learn them step by step and understand what each of these try to solve. These blog posts are the outcome of my learnings and these are for absolute beginners. So, if you think you’re an advanced guy, just share it to your beginner friends.
Here we’ll see how to implement a Counter component with:
- Section 1 : React with state ( not using Redux )
- Section 2: Try to integrate Redux and using store
- Section 3: Using React-redux library to connect between React and Redux
- Section 4: Removing boilerplate code with redux helper methods.
- Section 5: Async code handling with Redux
Building a simple counter in React ( with data saved in state )
In our first section, we’re going to build a simple
Counter component with React. This section is just for the beginners and if you know how this works, feel free to skip to the next section.
Let’s build the react Counter component and add a state to save the
number. The code is given below:
The example code is available in this Github repo. Just clone the repo and switch to the branch
In the next section we’ll see how to use redux to implement the same.