typescript - 在 Redux 中输入通用操作

Question

在我的 redux store 中，我有许多几乎相同的状态切片:

{
  cars: { fetching: false, data: [], error: '' },
  buses: { fetching: false, data: [], error: '' },
  bicycles: { fetching: false, data: [], error: '' }
}

我想要这样的操作:

const requestCars = {
  type: 'REQUEST::cars',
  brand: 'Toyota'
}

const errorBuses = {
  type: 'ERROR::buses',
  error: 'An error'
}

我可以生成操作而不是显式声明每个操作:

const requestAction = (vehicle: string) => ({
  type: `REQUEST::${vehicle}`
})

我的 reducer 看起来像:

const makeReducer = (vehicle: string) => (state, action) => {

  // I want to capture any action that has type REQUEST:vehicle

  switch(action.type) {
    case // problem is here
  }
}

所以我的根 reducer 是:

{
  cars: makeReducer('cars'),
  buses: makeReducer('buses'),
  bicycles: makeReducer('bicycles')
}

所以在 makeReducer(vehicle) 中，我实际上需要不加区别地捕获类型为 REQUEST::${vehicle} 的所有操作(比如设置 fetching 到 true)。

典型的例子是使用标记联合类型，但我不能，因为 action.type 没有文字类型。所以在 switch case 中，TypeScript 不允许我访问 action.brand。我也不能使用类型保护，因为我的操作中没有判别属性。有没有办法在不维护类型的字符串文字列表的情况下实现这一目标？

[编辑] - 事实证明这种方法是严重误导的，因为它会在为一辆车调度操作时将所有车辆的 fetching 状态设置为 true类型。我想我对以下事实感到困惑:虽然 state 在被传递到 reducer 之前被缩小了，但 所有 操作都通过它传递。但是，在罕见的(？)情况下，我将把它留给后代，您需要在单个 reducer 中听取满足特定条件的所有 Action 。

在这种情况下，解决方案是使用类型保护，从而使用可接受的答案。

Answer 1

由于 type 不是字符串常量，您不能使用带标记的联合，因为它们的类型保护行为依赖于字符串文字类型来工作。

然而，您可以使用自定义类型保护来检查操作是否是请求:

const makeReducer = (vehicle: string) => (state: any, action: {type: string}) => 
{ 
    if(isRequest(action)){ 
        console.log(action.brand); 
    } 
} 
function isRequest(action: {type: string}) : action is { type: string, brand: string } 
{ 
    return action.type.startsWith("REQUEST::"); 
}