React-Redux & Thunk

Even if there are similarities in the names, redux and react-redux are different terms.

Well, let’s talk a little about what Redux and React-Redux is all about: -

Redux is an open-source JavaScript library that will allow us to manage application states, it is used with React for building user interfaces.

Redux provides a centralized store that will make it easier to access data and components can directly access the data they need.

On the other hand, React-Redux is the official React binding for Redux, It allows React components to read data from a Redux Store and dispatch Actions to the Store to update data.

When we talk about Redux, usually the word Thunk comes to mind but what is Thunk really mean and what is its usage in the redux world?

Most of us were really confused when we first hear about Redux-Thunk but through time we learned that it is such a simple concept.

Thunk is a middleware coming from Redux library which helps us with async actions, It is just 14 lines of code and it is going to allow us to pass dispatch(a function of the redux store) a call back rather than passing dispatch and action object, That is all it’s going to do.

Below line of code is the Thunk function:-

function createThunkMiddleware(extraArgument) {

return ({ dispatch, getState }) => next => action => {

if (typeof action === ‘function’) {

return action(dispatch, getState, extraArgument);

}

return next(action);

};

}

const thunk = createThunkMiddleware();

thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

To set up Redux-Thunk in our projects, we need to install the dependency packages using:-

- npm install redux-thunk

or if you use yarn instead of npm you can install the package using:-

- yarn add redux-thunk

In my final React-Redux project I used Thunk middleware and in In order to enable Redux-Thunk I used the below code in my store.js file.

After Importing Thunk middleware and the necessary files and creating the store in my store.js file, I then imported the store component in my index.js so that I can pass the store inside the provider as shown below where the provider component makes the Redux store available to any nested components that need to access the Redux store.

I hope you enjoyed the read!

Stay safe!