Skip to main content

3 posts tagged with "library"

View All Tags

Deep dive to immer

· 27 min read
Hyunmo Ahn
Hyunmo Ahn
Front End Engineer @ Line+

This article basically takes time to learn about immer immer. If you don't know immer, I recommend reading next chapter first.

What is my curious?​

Question

Q1. How does immer change the mutable update way to immutable update way?

immer functions to return data immutably even when using the object built-in method that changes to be mutable. Let's find out how this function works internally.

This example is following basic example of immer official docs

import produce from 'immer';

const baseState = [
  { 
    title: "Learn TypeScript", 
    done: true,
  },
  { 
    title: "Try Immer", 
    done: false,
  },
]

const nextState = produce(baseState, (draft) => {
  draft.push({ title: "Tweet about It" });
  draft[1].done = true;
})

console.log(baseState === nextState) // false
console.log(nextState)
/*
[
  { 
    title: "Learn TypeScript", 
    done: true,
  },
  { 
    title: "Learn TypeScript", 
    done: true,
  },
  { 
    title: "Tweet about It",
  },
]
*/
Question

Q2. How does immer use structural sharing?

*structural sharing: When coping an object, the same reference is used for an object that has not been changed.

To update object immutably means that original object is copied to new object. In other word, copy needs to cost. When immer copy object, the unchanged reference copies the object using the structural sharing method that is reused. Let's find out what kind of structural sharing is used in immer.

Question

Q3. immer sometimes updates data through return rather than mutable updating the draft within produce function, in which case the logic is different?

When using an immer, there is a case of returning a new object instead of the mutable update method suggested above. This is same as the method of returning objects from javascript immutably regardless of the immer. immer officially is guiding this way and There will be many developers who use both methods, the method of changing objects to be mutable and method of changing objects to be immutable. Let's see what logic differences these differences cause in the immer.

// mutable method
const nextState = produce(baseState, (draft) => {
  draft.push({ title: "Tweet about It" });
  draft[1].done = true;
})

// immutable method
const nextState = produce(baseState, (draft) => {
  return {
    ...baseState,
    { ...baseState[1], done: true },
    { title: "Tweet about It" },
  }
})
PREREQUISITES
  • Experience using an immer or redux-toolkit
  • Understanding of Proxy (optional)

how to time travel debugging at redux-devtools

· 25 min read
Hyunmo Ahn
Hyunmo Ahn
Front End Engineer @ Line+

Purpose​

If you used redux in web application devlopment, you may have experience to use time-travel debugging with redux-devtools.

If you have confused about what redux-devtools is, please see below video.

If you don't have any experience about redux-devtools, I think it may be difficult to understand this article.

redux-devtools records the redux information(action, reducer state) of web applications using redux, rollback to the reducer at a specific point in time and can pretend that there was no specific action. However, It is not simple to try to implement similar actions inside web applictions without using redux-devtools. For example, If you press the A button, make as if The action that's been happening so far didn't happen or if you leave before pressing the Submit button, rollback all actions that occurred on the page.

redux-devtools is an easy to provide function with buttons, but I don't know how to implement it myself. How does redux-devtools make these things possible?

In this article, we will check below three things.

  • How to log the actions and reducer called in redux-devtools.
  • How to jump to a point where specific action is dispatched in redux-devtools.
  • How to skip a specific action as if it did not work in redux-devtools
PREREQUISITES
Caution
  • This article doesn't include content of browser extension
  • This article will say about core of redux-devtools and you can understand if you don't know about browser extension
  • If you want to know browser extension, It may not fit the purpose of this article.