Redux App Development

What is Redux? Will you use Redux in your apps from now?

What Is Redux?

Redux is a JavaScript library that enable you to have centralised state and logic for your apps. Having a global state that is a powerful time-saver because it can be accessed with an ease from any child component.

It can also be implemented in any JavaScript application, but we’re going to learn how to use it with React.

What’s New?

Redux introduces the following new concepts:

  1. Store
  2. Dispatching
  3. Action Type
  4. Action Creator
  5. Reducer

Redux Terminology

  1. Store – Holds all the application’s state. It needs a reducer.
  2. Dispatch – The method we use to call for a state change.
  3. Action Type – A simple constant that holds the name of the action creator.
  4. Action Creator – A method that lets the reducer know what action we want to perform.
  5. Reducer – The main piece. Here we dictate the logic for changing the state.

The Process

We first create Action Type which is just a constant.
Then we create an Action Creator based on imported type. In the return we pass the Payload (new state). We can now create the initial state inside the Reducer and update it with the Payload based on Action Type.

Basically, every time we want to change the state, we dispatch an action, which will trigger the reducer logic to change the state.

React-Redux

React however, without react-redux node package, would not be able to communicate to the store.

This package introduces 2 handy React hooks:

React Redux

mapStatetoProps()
We use this everytime we need the reducer’s state.

mapDispatchtoProps()
We use this everytime we want to change the reducer’s state.

connect()
Links our component with mapStatetoProps() and mapDispatchtoProps()

READ MORE: How to Use Redux in Your ReactJS App in Just 10 Minutes?

Final Words

Redux is not extremely hard. It takes time to set it up, and perform your first 2 state changes. After that, it is actually fine.

But don’t worry i will help 🙂

Part 2 is a practical Redux post. I will show you how to set it up with React and Code those 2 state changes. Essentially all the hard parts. Stay Tune.

That was it!

Rahul Sharma

Rahul Sharma is a Founder of Logical IDEA and Bee Flirty. He is a Professional WP Developers, UX Designer, and Digital Marketing Expert. Previously, He Worked as a Digital Marketing Head for An eCommerce Startup. He Graduated with honors from Lovely Professional University with a Dual Degree in Information Technology.

Leave a Reply

Your email address will not be published. Required fields are marked *