1

redux-toolkit の関数に含めたレデューサーにprepare含まれるコールバック関数に問題があります。addEntitycreateSlice

prepareコールバックを使用して、一意の ID をアクション ペイロードに追加しようとしています。

redux-toolkitのcreateSliceドキュメントには次のように書かれています。

準備コールバックを使用してアクション クリエーターのペイロード値の作成をカスタマイズする必要がある場合は、reducers 引数オブジェクトの適切なフィールドの値を関数ではなくオブジェクトにする必要があります。このオブジェクトには、reducer と prepare の 2 つのプロパティが含まれている必要があります。レデューサー フィールドの値はケース レデューサー関数である必要があり、準備フィールドの値は準備コールバック関数である必要があります。

これが私が使用しているコードです(TypeScriptで書かれています):

import { createSlice, createEntityAdapter } from '@reduxjs/toolkit';
import { MyEntityType } from '../../js/types/MyEntityType';
import { v4 as uuidv4 } from 'uuid';

const myEntityAdapter = createEntityAdapter<MyEntityType>();

const { reducer, actions } = createSlice({
    name: 'myEntity',
    initialState: myEntityAdapter.getInitialState(),
    reducers: {
        addEntity: {
            reducer: myEntityAdapter.addOne,
            prepare: (payload) => ({...payload, id: uuidv4()}),
        },
        removeEntity: myEntityAdapter.removeOne,
        updateEntity: myEntityAdapter.updateOne,
    }
});

しかし、アプリをコンパイルし、addEntityアクションを使用してエンティティの作成をテストすると、prepareコールバックは何もしていないように見えます。

Redux DevTools を使用してディスパッチするアクションは次のとおりです。

{
 type: 'myEntity/addEntity',
 payload: {myPayloadTrait: 100, id: 'test'} // Expected behavior: this id should be overwritten in the prepare callback
}

結果の状態:

myEntity: {
    ids: {
        0:"test"
    },
    entities: {
        "test": {
            myPayloadTrait: 100
            id: "test"
        }
    }
}

"test"ペイロードがレデューサーに渡される前に準備コールバックが ID を上書きしないのはなぜですか? ヘルプやガイダンスをいただければ幸いです。

4

1 に答える 1