redux-toolkit の関数に含めたレデューサーにprepare
含まれるコールバック関数に問題があります。addEntity
createSlice
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 を上書きしないのはなぜですか? ヘルプやガイダンスをいただければ幸いです。