Sunday, November 20, 2022

How to publish the nodeJS custom module version using command steps

 Hi All, please follow below are the steps command to publish the nodeJs custom module version


Follow these steps in order to cut a new version of `@bikash/register`. Through this
step-by-step guide, we will assume that the package is currently at `1.0.6` and that the
new version will be `1.0.7`.

1. Check out a clean version `git checkout master`
2. Pull down changes with `git pull`
3. Determine what the next version will be with `yarn release --dry-run`
4. Create a new release branch based on version from step 3 with `git checkout -b release/1.0.7`
5. Run `yarn release`
6. Check to make sure we have a new tag (`v1.0.7`) and a commit entry
7. Run `git push -u origin release/1.0.7 --follow-tags`
8. Create a new PR to merge `release/1.0.7` into `master`.
9. Merge PR

Monday, August 30, 2021

What is Difference between Redux Thunk and Redux Saga

 

Difference between Redux Thunk vs Redux-Saga

The Battle of the Middlewares

redux thunk versus redus saga

Managing UI state within complex web applications of present times is difficult. In this blog, we will try to find out how we can manage UI states using Redux and what can be the most suitable middleware along with Redux for your next amazing project.

Why Redux?

  • Redux is an open-source, cross-platform library for managing the application state
  • While redux is widely used with React & React Native, its usage is not limited to these technologies
  • It is an independent tool that can be plugged in with any UI layer or framework such as Angular, Vue, Ember, Flutter or even Vanilla JS
  • Redux may seem a bit intimidating at first glance but is extremely helpful to manage complex UI states
Redux-image

Redux to Your Rescue

Passing or sharing data from one component to other is a major task and can sometimes be very frustrating. To help us with situations like these, Redux offers immense help. Redux keeps a single store (sometimes called the ‘Single source of truth’ of all your application state(data) and the components can connect to the redux store and get back the data they want.

Isn’t this amazing?

Data Flow in Redux

Redux follows a unidirectional data flow. Redux has 3 major components: ‘actions’, ‘reducers’ and the ‘store’.

Redux-image

Actions are simple JavaScript objects. It has a ‘type’ property that specifies the type of the action we are performing and optionally, can also have a ‘payload’ property which is used to send some data to our redux store.

A simple action object can be as follows:

Redux-image

Reducers are the functions that determine the changes in application state and return the updated state. They take actions as the argument and update the state inside the store.

Sample reducer will look like this:

Redux-image

Now that we have a basic understanding of Redux, let us now move on to see how we can make API calls using redux middleware libraries like Redux Thunk and Redux Saga.

What is Redux middleware?

Redux middleware is a function or a piece of code that sits between action and reducer and can interact with the dispatched action before reaching the reducer function.

A redux middleware can be used for many purposes such as logging (e.g. redux-logger), asynchronous API calls, and so on.

Redux-image

Image: Redux Thunk vs Redux Saga

What is Redux Thunk ?

Redux and stuff is fine. What is “Thunk” anyway?

The word “Thunk” may seem vague at first but to put in amazingly simple terms, Thunk is just a function returned from another function.

Let us see an example:

Redux-image

Redux Thunk is a middleware that allows you to call the action creators that return a function(thunk) which takes the store’s dispatch method as the argument and which is afterwards used to dispatch the synchronous action after the API or side effects has been finished.

Confused? ðŸ˜§ðŸ˜§ðŸ˜§ Let us see an example:

Redux-image

In the above example, getCartItems() is an action creator which returns a function which in turn takes the dispatch method as the argument. After we have received the cartItems from the server, we will dispatch a regular synchronous action using the dispatch method.

I hope this makes sense now.

Now that we have seen what Redux Thunk helps us with, let us now see what Redux-Saga offers us.

What is Redux-Saga?

Redux Saga is also a middleware library that helps us with API calls or side effects. Redux Saga uses an ES6 feature called ‘Generators’ which helps us to write asynchronous code.

Generators are the functions that came with ECMA Script 6. And the amazing part is that the generator functions can be paused in between the execution or even can be exited and later re-entered.

A generator function is represented as: function* functionName() {}

Do not Sweat😰. This is not a Pointer.

A simple example of generator function can be:

Redux-image

Calling a generator function does not execute it at once; instead, it returns an iterator object. When we call the next() method on iterator object, function body is executed until it sees the next “yield” keyword.

next() method returns an object with a “value” property which has the value that has been returned by yield and a “done” property which stands for whether a function has completed execution or not.

How does Redux Saga work?

Redux Saga listens to the dispatched actions and triggers an API call or any other side effect you write.

Let us see in an example for how we can call an API endpoint using Redux Saga.

Redux-image

Saga works like a separate thread or a background process that is solely responsible for making your side effects or API calls unlike redux-thunk, which uses callbacks which may lead to situations like ‘callback hell’ in some cases. However, with the async/await system, this problem can be minimized in redux-thunk.

Who Wins?

It is completely up to you to choose the right approach for your projects. Personally, I have used both Redux-Thunk and Redux-Saga, and I feel if you are working on a small or a medium scale project, you can choose Redux-Thunk. It will work like a charm. But on the other hand, for bigger projects, Redux-Thunk may sometimes get you in trouble, as it can be hard to scale if your side effect or asynchronous logic increases, whereas in case of Redux-Saga, it comes power packed with some amazing things such as concurrent side effects, cancelling side effects, debouncing and is easy to scale.

To be honest, I love both tools. Choosing one is difficult as both have its advantages and disadvantages.

Redux-ThunkRedux-Saga
Less boilerplate codeMore boilerplate code
Easy to understand as compared to redux-sagaDifficult to understand as there are multiple concepts to learn like generator functions and redux-saga effects
May be difficult to scale upEasy to scale as compared to redux-thunk
Action creators may hold too much async logicAction creators stay pure
May get difficult to testComparatively easy to test as all your async logic remains together

I hope this blog helps you the actual difference between Thunk vs Redux-Saga?