在 Redux 中键入通用操作

Question

在我的 redux 商店中，我有许多几乎相同的状态切片：

{
  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}`
})

我的减速器看起来像：

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

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

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

所以我的根减速器是：

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

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

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

[编辑] - 结果证明这种方法被严重误导，因为它会在为一种车辆类型调度操作时将所有车辆的 fetching 状态设置为 true。我想我对这样一个事实感到困惑：state 在被传递到减速器之前被缩小，所有 动作都通过它。但是，在极少数 (?) 情况下，我将把它留给后代，您需要在单个减速器中监听满足特定条件的所有操作。

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

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::"); 
}

Answer 2

为什么不让您的makeReducer 函数采用比车辆类型名称更复杂的对象？

carType = {
   name: 'car',
   requestType : requestAction('car').type
}

然后：

makeReducer(carType)

然后

const makeReducer = (vehicleType) => (state, action) => {
  switch(action.type) {
    case vehicleType.requestType:
        //do your thing
  }
}