Frontends

Overview of Redux Thunk

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
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.

2022-12-23

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.

2022-05-30

4 minutes to read

Trying Out Redux Toolkit

Throughout my projects, I’ve used Redux for state management.

There are many state management libraries available. Recently, I’ve heard of libraries like MobX, Recoil, Zustand, and so on.

While I haven’t applied other state management solutions directly in my projects, the statistics indicate that Redux is overwhelmingly popular.

React

2022-05-19

4 minutes to read