Question

我第一次将Redux与TypeScript一起使用，想为我的动作分配类型，然后将这些动作类型绑定到关联的reducers动作参数。

我为一些简单的CRUD操作声明了一个命名空间，如下所示：

// listings.actionTypes.ts

export namespace ListingActionTypes {
    export interface GetListingsAction {
        type: string
    }

    export interface GetListingsErrorAction {
        error: string
        type: string
    }

    export interface GetListingsSuccessAction {
        listings: Listing[]
        type: string
    }
}

我的减速器文件具有以下每个操作的开关：

// listings.reducers.ts

const initialListingsState: [] = []

export const listingsReducer = (state: [] = initialListingsState, action: any) => {
    switch (action.type) {
        case 'GET_LISTINGS':
            return Object.assign({}, state, {})

        case 'GET_LISTINGS_ERROR':
            return Object.assign({}, state, { error: action.error })

        case 'GET_LISTINGS_SUCCESS':
            return Object.assign({}, state, { listings: action.listings })

        default:
            return state
    }
}

我希望纠正的是我的化简函数签名中any参数上的action: any类型。

我立即想到的过程是，将操作参数分配给名称空间（例如action: ListingActionTypes）很简单，但是由于编译器抱怨以下错误，因此似乎不被允许

不能使用名称空间“ ListingActionTypes”作为类型。

也许我不应该在这里使用名称空间？在这里的任何建议，将不胜感激。

Answer 1

我特别建议切换为使用the createSlice function from our official Redux Toolkit package，这是为了简化使用TypeScript时定义化简和动作创建者的步骤（还将简化您的应用程序代码）：

import {createSlice, PayloadAction} from "@reduxjs/toolkit";

export interface ListingsState {
  listings: Listing[];
  error?: string;
}

export const initialState : ListingsState = {
  listings: []
}

export const listingsSlice = createSlice({
  name: "listings",
  initialState,
  reducers: {
    getListings(state) {
      return {listings: []}; // TODO really reset the state here?
    },
    getListingsError(state, action: PayloadAction<string>) {
      state.error = action.payload;
    },
    getListingsSuccess(state, action: PayloadAction<Listing[]>) {
      state.listings = action.payload;
      state.error = undefined;
    }
  }
})

如何在给定的名称空间中设置“任何接口”的类型？

1 个答案: