使用 TypeScript 在 Redux 中调用另一个动作答案

【问题标题】：Calling an action within another one in Redux using TypeScript使用 TypeScript 在 Redux 中调用另一个动作
【发布时间】：2020-11-28 17:35:19
【问题描述】：

假设我有这 2 个动作（例如）用于“创建类别”和“加载所有类别”。每次成功创建新类别时，我都需要加载所有类别，因此，我需要在“createCategory”中调用“loadAllCategories”操作。我通常在使用带有 Redux 的 TypeScript 时这样做：

// Loading all categories
export const loadAllCategories = () => async (dispatch: Dispatch) => {

    try {

        // omitted for brevity

        dispatch<ILoadAntdTreeSelectCompatibleCategoriesAction>( {
            type: TaxonomyActionTypes.LOAD_ANTD_TREESELECT_COMPATIBLE_CATEGORIES,
            payload: {
                catTreeSelectLoading: false,
                catTreeSelectRegistry
            }
        })


    } catch (error) {

        // omitted for brevity

    }
}

// Creating a category
export const createCategory = (taxonomy: ITaxonomy) => async (dispatch: Dispatch) => {
    
    try {
        await agent.Taxonomies.create(taxonomy);

        dispatch<any>(loadAllCategories());    <--- Dispatching above action within this one

        dispatch<ICreateCategoryAction>({
            type: TaxonomyActionTypes.CREATE_CATEGORY,
            payload: {
                loadingInitial: false
            },
        })

    } catch (error) {
        // omitted for brevity
    }
}

我想知道，使用带有“any”类型的调度是在当前动作中调用另一个动作的唯一方法，还是有更好的方法？

我可以使用更具体的类型而不是“任何”吗？

不用dispatch(action)不用说，只要调用action的名字就不会改变状态，所以我们必须使用dispatch。

这样做的最佳做法是什么？

【问题讨论】：

标签： reactjs typescript redux dispatch thunk

【解决方案1】：

当您创建一个类别时，有一种更简单的方法可以做到这一点，假设您为此使用了一个 API，让该 API 返回您添加的值作为响应，然后将该类别添加到 Redux 中的类别列表中。在 reducer 中使用以下函数。

const addToList = (oldList:any, doc:any) => {
  let newList:any = oldList;
  newList.push(doc);

  return newList;
}

并在reducer函数中调用它

case TaxonomyActionTypes.CREATE_CATEGORY:
      return { ...state, categories: addToList(state.categories, action.payload) }

编辑

你的问题的答案是

dispatch<Array>

示例

interface Category {
  name: String,
}


let x:Array<Category>

【讨论】：

这个问题的目的是了解使用 TypeScript 在 Redux 中调用另一个动作的最佳实践。我只是想知道我是否可以使用另一种更具体的类型而不是“any”来进行调度，仅此而已，尽管谢谢。
@Aspian 抱歉，所以 getAllCategories 会返回一个列表，所以可以使用 Array 类型使其更严格
谢谢，但是“loadAllCategories”的返回类型是 Promise，因为它是异步的并且使用 thunk，所以它调度一些东西并且不返回任何东西，所以类型是 Promise。讽刺的是，我们不能使用它作为 dispatch 的类型，因为 dispatch 实现了 Redux 的 Dispatch 接口，它的默认类型是 AnyAction 像 Dispatch 但是你不能像这样使用它 Dispatch> 因为 Promise 没有满足需要属性“type”的约束“Action”。这就是我使用“any”类型进行调度的原因。它工作正常，但它是一个黑客。