DEV Community: Ali Bahaari

What are "Thunk" and `createAsyncThunk` in Redux Toolkit?

Ali Bahaari — Tue, 01 Mar 2022 00:28:34 +0000

What Is Thunk In Redux?:

Thunk is used for fetching data from a API and storing response in Redux states which shortens and increases code clean-up.

What did you use to fetch data?

First, by using useEffect hook and in componentDidMount lifecycle, you would have fetched data from an API. What about storing in Redux? You would have used useDispatch hook for storing and then using useSelector for getting the data.
OK? Now, this operations are assigned to Thunk and you don't need to crowd every components in which you use the data you've called an API.

After that, you should check the results for statuses which can be fulfilled, rejected and pending which can be done more easily by using Thunk.

And remember this is a quote from Redux Toolkit documentations:

This abstracts the standard recommended approach for handling async request lifecycles.

Thus, code is cleaner, more standard and more flexible in writing.

Example In Usage

Consider I have a slice called usersSlice.js. createAsyncThunk will be used and created as shown below. Assume we want to fetch users list from an API:

import { createAsyncThunk } from '@reduxjs/toolkit';

export const getUsers = createAsyncThunk(
  'usersSlice/getUsers',
  async () => {
    return await fetch('http://localhost:4000').
      then(res => res.json());
  }
);

const initialState = {
    status: null,
    data: []
}

const usersSlice = createSlice({
    name: 'usersSlice',
    initialState,
    extraReducers: {
      [getUsers.pending] = (state) => {
        state.status = 'Pending';
      },

      [getUsers.fulfilled] = (state, action) => {
        state.status = 'Fulfilled';
        state.data = action.payload;
      },

      [getUsers.rejected] = (state) => {
        state.status = 'Rejected';
      }
    }

export default usersSlice.reducer;

First you create a variable called getUsers which is assigned to createAsyncThunk (notice export keyword before declaring the variable). createAsyncThunk has 2 arguments. The first one is a string for specifying the Thunk name and the second one is a async function which will return a promise.

Then you create a slice by using createSlice. In extraReducers (notice reducers property is different) you specify 3 probable states of the promise which are pending, fulfilled and rejected. You decide what should Redux do in these 3 different states of the API.

Pending means API manipulation is being continued.
Fulfilled means response was got from API.
Rejected means API call was failure.

After that, you declare the reducer you've created in configureStore:

import { configureStore } from '@reduxjs/toolkit';
import usersSlice from './slices/usersSlice';

export const store = configureStore({
    reducer: {
        usersSlice,
        ...
    }
});

Then, create a component called UsersListComponent.js and then, you'll do as this:

import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { getUsers } from './store/slices/usersSlice';
...

  const dispatch = useDispatch();
  const usersData = useSelector(state => state.usersSlice.data);
  const usersDataStatus = useSelector(state => state.usersSlice.status);

  useEffect(() => {
    dispatch(getUsers());
  }, []);

First you should dispatch the async function you've created by using createAsyncThunk. All operations will be done by Redux and BOOM! Everything is ready and you can use useSelector hook to get data and use it as you like:

return (
  <>
    {
      usersData.map(userData => (
        <div>
          <span>{userData.id}</span>
          <span>{userData.firstName}</span>
          <span>{userData.lastName}</span>
        </div>
      ))
    }
  </>
);

Also you can use status state for checking the status of the API:

return (
  <>
    {
      usersDataStatus === 'Pending' ? <span>Pending</span> :
      usersDataStatus === 'Fulfilled' ? <span>Fulfilled</span> :
      usersDataStatus === 'Rejected' ? <span>Rejected</span> : 
      ''
    }

    {
      usersData.map(userData => (
        <div>
          <span>{userData.id}</span>
          <span>{userData.firstName}</span>
          <span>{userData.lastName}</span>
        </div>
      ))
    }
  </>
);

Everything works as before but cleaner, more standard and more flexible.
Congratulation! You've been learning how to use Thunk and createAsyncThunk in Redux Toolkit.

Three types of functions in JavaScript!

Ali Bahaari — Fri, 10 Dec 2021 11:26:27 +0000

There are 3 ways which functions can be declared in JavaScript.
In this article, I'm going to show you and compare these.

Named Functions

This type receives a name for the function declaration:

function myFunction(text) {
    console.log(text);
}

myFunction('Hello World!');

Anonymous Functions

This type doesn't receive explicitly any name for declaration. Instead, the function will be assigned to a variable for invoking.

const myFunction = function(text) {
    console.log(text);
}

myFunction('Hello World!');

Arrow Functions

This type is similar to lambda functions in other programming languages. It doesn't receive explicitly any name (it will be assigned to a variable for invoking) and the structure is so simpler.

const myFunction = (text) => {
    console.log(text);
}

myFunction('Hello World!');

BOOM! Now you've been learning 3 types of function declaration in JavaScript which may help you a lot in developing web applications and etc.

You can or may want to connect with me through the networks I've put on my website: Ali Bahaari's Website

How to re-fetch data when something changes in React.js?

Ali Bahaari — Mon, 22 Nov 2021 11:41:48 +0000

Assume you have a list in your web application which you would allow the clients to manipulate the list records by removing, editing and adding. What happens if data would change?!
Often we should update data behind the scene and silently.
There are 2 ways which I'll be showing you.

Method 1

In fact, this method is not the subject of our article but I'll explain.

Consider you would fetch data from an API. You would use state management systems like Redux, Redux Toolkit and etc. After that, you would manipulate data there and the list would be updated. But wait a minute...
What about a list which is needed to be updated synchronously?! Sure! The list is outdated and is not efficient.

Method 2

Re-fetching is the key of our process. But the main question is:
How should I know data would change?!

1- OK! First of all, you must declare a state by using useState, Redux and etc. The default value should be boolean which in my case is a false.

const [toggle, setToggle] = useState(false);

2- Consider the clients commence to add records. When POST method of an API executed, the state should be toggled by negating the previous state value.

setToggle(prevState => !prevState);

3- What now?! Write useEffect for fetching the data again while dependency variable has been set to toggle state.

useEffect(() => {
    // Fetching
}, [toggle])

BOOM! Because of changing the toggle state after every change you've specified, the data will be fetched again and nicely without doing this manually by for example clicking on a button and etc.

You can or may want to connect with me through the networks I've put on my website: Ali Bahaari's Website

How to combine event methods in one in React.js?

Ali Bahaari — Mon, 15 Nov 2021 18:16:08 +0000

Consider you have multiple buttons having several handleClick methods as below:

<button onClick={handleClick1}>Lorem Ipsum 1</button>
<button onClick={handleClick2}>Lorem Ipsum 2</button>
<button onClick={handleClick3}>Lorem Ipsum 3</button>
...

Thus, what's the problem?! You may have faced it! Consider if you have 100 buttons, you should declare 100 handleClick methods!

Let me show you a simple and elegant way for the problem above.

Use `name` Attribute

Due to w3schools.com defintion:

the name attribute specifies a name for an HTML element and can be used to reference the element in JavaScript.

Therefore first, I rewrite the code above and two important changes will be in your sights:

One method has been declared for onClick events called handleClick
I've used name attribute along with different values

<button onClick={handleClick} name="LI1">Lorem Ipsum 1</button>
<button onClick={handleClick} name="LI2">Lorem Ipsum 2</button>
<button onClick={handleClick} name="LI3">Lorem Ipsum 3</button>
...

Then, I write handleClick method:

const handleClick = (e) => {
    (e.current.name === "LI1") ? (DO SOMETHING 1) :
    (e.current.name === "LI2") ? (DO SOMETHING 2) :
    (e.current.name === "LI3") ? (DO SOMETHING 3) :
    ... :
    (Else);
}

Boom! Now compare the code above with the another one. Simplicity and optimization are shining and working like a charm indeed! :)

You can or may want to connect with me through the networks I've put on my website: Ali Bahaari's Website

How to break outer ones of nested loops in Python?

Ali Bahaari — Fri, 12 Nov 2021 10:53:43 +0000

You may have faced something weird in Python!
Consider you would use two nested loops. Just use break keyword in the most internal one. What happens? Only the internal one would be broken and stop working. What about the others? Well, Python doesn't have any elegant way for doing this. I'll tell you how to deal with it.

Example

Run the code below:

for i in range(10):
    for j in range(10):
        if j == 4:
            print(j)
            break

You would see number four 10 times. But...
Sometimes the inner loops depend on outer ones. Therefore you need to stop outer ones when conditions are provided in inner ones.

Solving the Problem

The most easy way for solving the problem is using flags.

Check the code below:

loop_breaker = False

for i in range(10):
    if loop_breaker:
        break

    for j in range(10):
        if j == 4:
            print(j)

            loop_breaker = True

            break

BOOM! It prints number four only 1 time.

Use and enjoy!

How to make an object center that doesn't have `static` position in CSS?

Ali Bahaari — Fri, 05 Nov 2021 21:08:26 +0000

Sometimes you may have asked yourself the question above. It's so simple which I want to explain.

Consider you have a div tag along with these CSS properties:

width: 50px;
height: 50px;
background-color: #000;
...

The code above is simple and I'm sure if you've experienced CSS, you can understand it.

I add more to the code above:

position: absolute;
top: 50%;
left: 50%;
...

The article is suitable for non-static position. It may consist of relative, absolute and fixed positions. Thus, you must specify the position property with the values above to be correctly worked.

top: 50% and left: 50% properties work simply and they make the object center vertically and horizontally... . But!
The aligning coordinates are start against properties you have used.

Until now, If you've checked the code above, you may have noticed the object is slightly to the right of its parent and if you use right: 50% instead of left: 50%, you may notice the object is slightly to the left of the parent and not exactly center. Even for top and bottom this phenomenon occurs.

So there should be miracle here to fix the code! Use the code below and check it again:

transform: translate(-50%, -50%);

Boom! It works nicely and correctly. Why!?
The value of the transform property works based on objects' width and height and the slight movement talked before will be covered and makes the object center exactly.