Four most IMP(important) Rules of Reducers!🔥🧨🎇

#react #redux #reducers #javascript

Hi, coding people 🙋🏻‍♂️✋🏻

As you might know, my name is Atul and I write articles about coding, freelancing and most of Web. Now in this article, I am going to memories you of the four most important rules of reducer + explanation which is a child of Redux.

So let's dive in 🥽🏊🏻‍♂️

1 Must return any value besides 'undefined' 🚫

🤚That means your reducer must return something anyway. your reducer should not be written undefined in any case. It can be written

Any Number 123

Any string abc

[] Empty array

{} Empty object

And null

but not undefined

if you using undefined you are most likely going to see this beautiful error 😁🤦‍♂️

NOTE: It does not react, a redux rule that is how javascript functions work.

As you can see an error screenshot that shows your reducer can't return undefined during initialization 🚴🏻‍♀️ but that's not it. your reducer can't return undefined in never ever when reducer initialized first time or any time in future when the action has been dispatched.

2 Reducer produces 'state', or data to be used inside of your app using only the previous state and the action.

🥵🤒 it's totally confusing don't sweat it lets break it so you can understand too.

So whenever your React.js application starts with redux your reducer before produce or catches new data from the state it uses old state or data to add your new data with it so that you can get your data.

🔥🔥🔥In this diagram, you see the reducer position when it first time going to call.

When you first start your Redux application each reducer initialize with two arguments

A.undefined
B.Action #1

The reducer uses these two✌️ arguments to produce new state values.

if you say Atul 🥴 you said in the first rule that reducer "Must return any value besides 'undefined'" and now reducer gets undefined argument so my answer is

Reducer automatically gets undefined value and javascript does not allow it that's why we set it to value either null or anything empty.

The things get really interesting when reducer get's called on the second time.

So this is the position of our reducer when it runs the second time.

As you see here when our reducer gets called first time it uses two arguments first is null/undefined and second is action and produced state V1

Now when reducer called the second time it uses our state v1 and our new action(Action #2) to produce new state(State V2)

3 Must not return reach 'out of itself' to decide what value to return (reducers are pure) 🚕🏂🏻

In this rule author trying to say that reducer nothing doing other things like API calls, document.write function and anything else. It just uses two arguments A.previous state B.action doing some competition or calculation to decide what to show next. That's all the works of reducer.

4 Must not mutate its input 'state' argument 🤷🏽‍♂️🤸🏽‍♂️

Okay, that's not the worst thing in the world.

This rule is trying to say that we can't mutate state in the reducer.

actually in react it's recommended that don't use

array/obg.push()

array/obg.pop()

methods to react.

React has there inbuild methods to do this activity. 🔥🔥🔥

*Thank's 😍💝 for reading. If you are interested to learn more like this make sure follow me So that when I post my article you will get notified *

📸/atulcodex 👨🏻‍💻/Atul Prajapati