logo

Overview of Redux Thunk

  1. createAsyncThunk allows you to create actions for handling asynchronous operations.
const asyncUpFetch = createAsyncThunk('counterSlice/asyncUpFetch', async () => {
  const resp = await fetch('https://api.aergo.io/~~')
  const data = await resp.json()
  return data.value
})
  • createAsyncThunk Flow
    createAsyncThunk
  • While reducers automatically create action creators for you, this is not the case for asynchronous operations. You need to create the action creators manually within extraReducers.
    actionCreator
One minute to read

Image Masking in React

<Button variant="contained" component="label">
  Upload Icon
  <input
    accept="image/*"
    multiple
    type="file"
    hidden
    onChange={(e: ChangeEvent<HTMLInputElement>): void => handleUploadIcon(e)}
  />
</Button>

First, we create an upload button that accepts all images and creates an input tag of type file.

const handleUploadIcon = (e: ChangeEvent<HTMLInputElement>) => {
  setImgFile(e.target.files[0])

  const imagePromise = e.target.files[0].arrayBuffer().then((buf) => {
    return makeImage(buf, figure, borderColor)
  })

  imagePromise.then((resized) => {
    const fileReader = new FileReader()
    fileReader.readAsDataURL(resized)
    fileReader.onload = (e) => {
      const image = new Image()
      image.src = e.target.result as string
      image.onload = () => {
        const base64Img = e.target.result as string
        //   //! Convert icon to hash
        const hash = CryptoJS.SHA256(base64Img).toString()
        const file = dataURLtoFile(base64Img, 'MaskedImage.png')
        dispatch(setInfo(base64Img, 'base64Img'))
        dispatch(setInfo(hash, 'Icon Added'))
        setFile(file)
      }
    }
  })
}

We use the makeImage function to mask the image and the dataURLtoFile function to create a file object.

4 minutes to read

Asynchronous Processing in JavaScript

Promise

The Promise object, introduced in JavaScript ES6, was first created to solve the “callback hell” problem, which arises when callback functions accumulate during asynchronous operations.

While it works on the same principle, the Promise object provides better readability, which is why it is utilized. However, using many promise variables can lead to experiencing “promise hell” as well.

Response Time of Callback Functions, Promises, and Async/Await

The response time for both callback functions and promises is almost identical. They are read sequentially in the initial hoisting environment, causing the asynchronous part to be read before the previous processes are complete.

13 minutes to read
Newer posts Older posts