Skip to main content

2-11

Redux-Saga​

  • 為了易於測試與使用，redux-saga 提供了 Effect 的概念與相關產生 Effect 的 function，例如 call, put 等等。

  • Effect 只是一個固定格式的物件，描述此 Effect 要做什麼，接著 Saga Middleware 將會根據 Effect 的內容做相對應的處理，例如: 執行非同步請求或 dispatch action 給 redux。

  • 也因為 Effect 是固定 plain object，故撰寫測試時只要比對函式產生出的物件是否是預期中的就行了。

  • Saga 執行順序在 Reducer 之後

順序形容詞​

primary, secondary, tertiary quaternary, quinary, senary, septenary, octonary, nonary, and denary, although most of these terms are rarely used. There's no word relating to the number eleven but there is one that relates to the number twelve: duodenary.

拼音後按 Enter​

使用拼音輸入後按 Enter，不會觸發 keypress，但是會觸發 keydown、keyup。 在需要偵聽使用者打完字後按 Enter 直接作動時，要用 keypress，用另外兩個事件的話會在拼音完按 Enter 的那一下直接觸發。

樣式內參數隨資料會時常變動的話需用 attrs 去寫 style 上去，避免產生很多動態的 class 樣式

// Over 200 classes were generated for component styled.div with the id of "sc-cNKqjZ".
// Consider using the attrs method, together with a style object for frequently changed styles.
// Example:
  const Component = styled.div.attrs(props => ({
    style: {
      background: `url(${props.background})`,
    },
  }))`width: 100%;`

  <Component background={'https://images.com/someimage.jpg'}/>

以上注意 <泛型>需在 attrs 與後面樣式字串前都要給：https://stackoverflow.com/questions/61979237/styled-components-attrs-w-typescript

type ComponentProps = {
   background: string
   color: string
}
const Component = styled.div.attrs<ComponentProps >(props => ({
  style: {
    background: props.background,
  },
}))<ComponentProps>`
  width: 100%;
  color: ${props => props.color};
`

使用 React-Leafelt 踩坑​

由於該套件用很新的 ES 語法：proposal-nullish-coalescing-operator (??)，所以若是用 CRA 起的專案，在編譯時會解析不了最新語法，故該 gihub issue 上有討論解決此問題讓新語法能被編譯打包：https://github.com/facebook/create-react-app/issues/9468

網頁自動播放音檔或影片​

  • 最初是手機版的瀏覽器禁止自動播放，為了節省流量與耗能，之後桌面版瀏覽器也跟進。
  • 目前影片跟音檔可自動播放但是音訊本身是禁止的。
  • 使用者只要在網頁上有互動行為產生(如點擊之類的)，瀏覽器才會開放讓程式播放音訊。
  • https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/718157/

Redux-Saga take, takeEvery, takeLast​

  • takeLast: 接到 action 後觸發函式，運行過程中，若又接到 action 會將目前在運行的丟掉跑新觸發的函式。
  • take: 只負責接收 action，可以用來收集好幾次 action 後再 yield 其他事情。因為 take 完成後就不會再執行了，所以會搭配 while (true) 迴圈重複跑
  • takeEvery: 接到 action 後觸發函式，會一直接收一直觸發。

React-Leaflet custom Marker Icon​

查看偵聽該 port 的程式​

  • sudo lsof -i :8081

終止該程式​

  • kill -9 <PID>

ESLint Setting​

JSON 格式的物件貼到 JS 中 format 後，明文 key 也會被 single (or double) quote 包住，將 ESLint 設定：'quote-props': ['error', 'as-needed'] 即可強制明文 key 不能用 quote 包住。

RTK Query Cache​

快取邏輯：(以下稱 endpoint 和 args 的 request 為組合)

  • 當此組合為第一次發送時，會將 response 存入 store，當有相同的組合發起 request 時，會回傳上次存在 store 的資料。
  • 當有 component 訂閱該組合時，store 存的會一直存在且快取住。直到沒有 component 訂閱該組合時會開始計時(預設 60 秒)，期間若沒有 component 訂閱該組合時，該 store 存的 cache 會丟掉，下次發相同組合的 request 時就會發出去。
Last updated on