TypeScript 中的 Redux Toolkit：添加时间戳的 createAction 抽象

Question

在 createAction() 上使用 Redux Toolkit with TypeScript, I want to be able to add a timestamp property to all payloads using a prepare callback 并保持良好的类型定义。目前我用很多重复的代码来做到这一点，比如：

const timestampAdder = (unpreparedPayload) => {
    const prepared = { payload: unpreparedPayload };
    if (!unpreparedPayload.timestamp) {
        prepared.payload.timestamp = Date.now();
    }
    return prepared;
};

export const someActionCreator = createAction(
  'slice_name/action_name',
  (
    prePayload: Omit<MyPayloadInterface, 'timestamp'>
  ): { payload: MyPayloadInterface; } => timestampAdder(prePayload)
);

export const someActionCreator2 = createAction(
  'slice_name/action2_name',
  (
    prePayload: Omit<EntirelyDifferentInterface, 'timestamp'>
  ): { payload: EntirelyDifferentInterface; } => timestampAdder(prePayload)
);

// ...repeat the same structure for each action I want to add "timestamp" to...

如果这是纯 JS（或不太严格的 TS），我可以这样做：

export const jsActionCreator1 = createAction('js/action_name1', timestampAdder);
export const jsActionCreator2 = createAction('js/action_name2', timestampAdder);

但由于TS中各种action creator的接口不同，我最终为每个都写了很多样板来维护良好的类型。我可以在 TS 中做同样的事情：

export const myActionCreator = createAction('slice_name/action3_name', timestampAdder);

但是我失去了类型的好处，我可以用 any 参数调用动作创建者：

myActionCreator(123);
myActionCreator('abc');
myActionCreator({ a: 1, b: 'c' });

有没有减少样板文件但保持良好类型的好方法？谢谢！

Answer 1

就做类似的事

const timestampAdder = <T>() => (unpreparedPayload: T) => {
    const payload = Object.assign( { timestamp: Date.now() }, unpreparedPayload )
    return { payload };
};

并像

一样使用它

export const actionCreator1 = createAction('js/action_name1', timestampAdder<{foo: string}>());
export const actionCreator2 = createAction('js/action_name2', timestampAdder<{bar: number}>());

从本质上讲，您有一个环绕的方法调用，只是为了“绑定”那里的类型。

TypeScript 中的 Redux Toolkit：添加时间戳的 createAction 抽象

Redux Toolkit in TypeScript: createAction abstraction of adding timestamp

typescript

reactjs

redux

react-redux

redux-toolkit