ngrx：通用减速器

Question

我有一个具有多个具有相同减速器功能的商店的应用程序。 我试图制造一个通用的减速器，并且效果很好。

通用减速机设置：

interface State<T> {
    itemList : T[]
}

const initialState: State<any> = {
    itemList: []
}


const createReducer = <T>(type: string) => {
    return <T>(state = initialState, action: any): State<T> => {
        switch (action.type) {
            case types.get(type).Add:
                return {
                    ...state,
                    itemList: [...state.itemList, action.payload]
                }

            case types.get(type).AddList:
                return {
                    ...state,
                    itemList: [...state.itemList, ...action.payload]
                };

            default:
                return state;
        }
    }
}

然后，我将减速器组合如下：

export const reducers: ActionReducerMap<AppState> = {
    vehiculeState: createReducer<Vehicule>('vehicule'),
    rentState: createReducer<Rent>('rent'),
    clientState : createReducer<Client>('client'),
    companionState : createReducer<Client>('companion'),
    paymentState : createReducer<Payment>('payment'),
    notificationState : createReducer<Notification>('notification'),
    employeeState : createReducer<Employee>('employee')
}

问题是，通过切换到通用模式，我将不得不重写我的应用程序的很大一部分，因为我已经创建了多个化简器，其状态包含名为（ clientList ， vehiculeList ，...）的属性，并且属性名称itemList为不是很丰富。 所以我的问题是如何切换到通用模式并保持状态属性不变？

电流降低器的示例：

export function rentReducer(state = initialState, action: rentActions.RentActions): State {
    switch(action.type){
        case rentActions.ADD_RENT:
        return{
            ...state,
            rentList : [...state.rentList, action.payload]
        }

        case rentActions.ADD_RENT_LIST:
        return {
            ...state,
            rentList : [...state.rentList, ...action.payload]
        };


        default:
        return state;
    }

}

Answer 1

您可以使用字符串表示itemList属性名称，并使用映射类型将字符串转换为State类型的类型安全属性。 一个缺点是映射类型不支持使用散布运算符，但是使用Object.assign可以获得类似的效果

// We add an extra parameter to State that will be the property name passed in as a string literal type
// So State<Vehicle, 'vehicleList'> will be a type equivalent to { vehicleList : Vehicle[] }
type  State<T, TListName extends string> = {
    [P in TListName] : T[]
}

// We create a function that creates the initial state by initializing an object with an empty array and the given property name
const initialState = <T, TListName extends string>(itemListName: TListName): State<T, TListName> => {
    let result = {} as State<any, TListName>;
    result[itemListName] = [];
    return result;
};

// Since we can't use the spread operator, we create a new function that updates the state 
// state will be the original state, 
// itemListName the property name which contains the list 
// newItems will be the new list 
const updateState = <T, TListName extends string>(args: { state: State<T, TListName>, itemListName: TListName, newItems: T[] }): State<T, TListName> => {
    return Object.assign({},args.state, {
        [args.itemListName] : args.newItems
    });
}
// We will use a 2 function approach for the createReducer function
// We do this in order to be able to specify the item type  (T) explicitly,
// but not have to specify the string literal type TListName and let it be inferred 
const createReducer = <T>(type: string) => <TListName extends string>(itemListName: TListName) => {
    return (state = initialState<T, TListName>(itemListName), action: any): State<T, TListName> => {
        switch (action.type) {
            case types.get(type).Add:
                return updateState({
                    state,
                    itemListName,
                    newItems: [...state[itemListName], <T>action.payload]
                });

            case types.get(type).AddList:
                return updateState({
                    state,
                    itemListName,
                    newItems: [...state[itemListName], ...<T[]>action.payload]
                })

            default:
                return state;
        }
    }
}
export const reducers = {
    vehiculeState: createReducer<Vehicule>('vehicule')('vehiculeItems'),
    rentState: createReducer<Rent>('rent')('rentItems'),
    clientState : createReducer<Client>('client')('clientItems'),
    companionState : createReducer<Client>('companion')('companionItems'),
    paymentState : createReducer<Payment>('payment')('paymentItems'),
    notificationState : createReducer<Notification>('notification')('notificationItems'),
    employeeState : createReducer<Employee>('employee')('employeeItems'),
}