Why “ReDuX AcTiOnS” !!!

Before we start about redux-actions, we will start with simple actions. Now what are actions, they are just dumb objects having two things. One, what is this object for ?, means for what purpose it has been created i.e TYPE. Second, what information this object contains i.e PAYLOAD.

Now in Redux, to catch the which state has been affected we use TYPE for it and parallel we get what is the new data, that has to be updated in data house i.e Redux Store.

{   
  type: 'TEXT_CHANGED',   //affected state
  text: 'my updated text' //payload
}

We mostly use switch statements to detect which type has been affected. That function which contain switch statements is a reducer functions.

The above thing we do for the normal redux. But what if we want multiple internal dispatch on single type ( it is possible with complexity ) ? Let say we need to do something before we update in the store via reducers ? What if we need some parameters to separate from payload ?

Redux Actions

This helps with above issues and also help to manage your code in clean an organised way. Redux Actions helps to bind your type constants with your action creators and action handlers, so that when your action creators are made with your action types, basically you are indirectly calling handle actions (Reducers) via action types.

It also give one more feature to combine your action types to behave as one, you can trigger more that one action handler with single action creator function.

So their are three main functions we can used in redux-acitons i.e -

1. createAction (s)
2. handleAction(s)
3. combineActions

These are the three main functions that help to workout with redux actions.

NOTE : As you can see above Action Types is working like glue between Action Creators and Action Handlers.

Action Handlers -

Firstly you have to define Action Handlers which are reducers to make updates in store state. You can use handleActions() for multiple handlers and handleAction() for single handlers. I have handleActions(reducerMap, defaultState) in below example -

1st parameter is reducerMaped actions with Action Types.

Above, INCREMENT and DECREMENT are the Action Types which you can save in another file which only use for constants and directly exports them, because these constants will further will used with Action Creators.

2nd parameter is default state of this reducer.

Action Creators -

Now you have Action Handlers and they can be used with help of Action Types. As i mentions above, INCREMENT and DECREMENT are the Action Types. You can use createActions() for multiple action creators and createAction() for single action creator. I have createAction(actionType) in below example -

you can see we are using Action Types as arguments in createAction(‘here’) and it returns the function which was define above in action handlers with pre-define 1st parameter as state and 2nd is action{ type, payload }, type as action type and payload is the data we pass in createAction(‘your_payload’).

Combine Actions

Combine any number of action types or action creators. types is a list of positional arguments which can be action type strings, symbols, or action creators. This allows you to reduce multiple distinct actions with the same reducer.

The parameters of combineActions() will be the Action Type Constants which are exported from constants file.

Now when ever we use createAction() and utilise any return function from increment() or decrement(), your combineAction() will get invoked.

Here we have combine two Action types with single reducer function. We use this less but yeah it’s toppings on pizza. In some situations when your application gets more heavier, you will need at that time.

References -

You can get more details in API Section here.

Please clap if you like it and share your comments for discussions.
Don’t forget to point me out if i am wrong anywhere.

Bye ❤️