Redux Toolkit 中 createSelector 和 createDraftSafeSelector API 的區別

Question

在https://github.com/reduxjs/reselect中提到的createSelector

createSelector API，生成記憶選擇器函數。 createSelector 接受一個或多個“輸入”選擇器，從 arguments 中提取值，以及一個“輸出”選擇器，接收提取的值並返回派生值。 如果生成的選擇器被多次調用，output 只有在提取的值發生變化時才會重新計算。

createDraftSafeSelector ://redux-toolkit.js.org/api/createSelector 中提到的 createDraftSafeSelector

createDraftSafeSelector允許創建可以在createReducer和createSlice reducer 中安全使用的選擇器，並具有 Immer 驅動的可變邏輯。 當與普通的 state 值一起使用時，選擇器仍將根據輸入正常記憶。 但是，當與 Immer 草稿值一起使用時，為了安全起見，選擇器會在重新計算結果方面出錯。

我是新來的反應和redux設計模式，所以無法理解createDraftSafeSelector的區別和目的。

API 兩者有什么區別？ 有什么例子可以理解差異？

Answer 1

使用createDraftSafeSelector創建的選擇器可以在createReducer或createSlice reducer 中安全使用，而createSelector則無法做到這一點，因為它僅依賴於 object 引用相等。

即使您在中間修改了 state，使用createSelector創建的選擇器總是會為一個 reducer 調用返回相同的結果。

大多數人從不在 reducer 中使用選擇器，所以你可能永遠不需要它。

Answer 2

查看草案安全選擇器的實際使用情況， interactionsBucketsSelectors.selectById(state.interactionsBuckets, convPk)

我們可以在 RTK case reducer 的 Draft safe 選擇器中傳遞 immer.js 的草案 state。

在getSelectors()中創建的selectById草稿安全選擇器。

createDraftSafeSelector是對createSelector的封裝，它不僅支持createSelector可以處理的通用 JS object state ，還支持草稿 Z46A2A41CC6E552044816A2D0463454 的源代碼：

import { current, isDraft } from 'immer'
import { createSelector } from 'reselect'

/**
 * "Draft-Safe" version of `reselect`'s `createSelector`:
 * If an `immer`-drafted object is passed into the resulting selector's first argument,
 * the selector will act on the current draft value, instead of returning a cached value
 * that might be possibly outdated if the draft has been modified since.
 * @public
 */
export const createDraftSafeSelector: typeof createSelector = (
  ...args: unknown[]
) => {
  const selector = (createSelector as any)(...args)
  const wrappedSelector = (value: unknown, ...rest: unknown[]) =>
    selector(isDraft(value) ? current(value) : value, ...rest)
  return wrappedSelector as any
}

您可能還想查看這兩個測試用例，了解createSelector和createDraftSafeSelector之間的區別。

如果沒有將 immerjs 的草案 state 傳遞給選擇器，則不需要使用createDraftSafeSelector 。