如何使用 TypeScript + Redux 从我的道具访问我的调度例程？答案

【问题标题】：How can I access my dispatch routines from my props using TypeScript + Redux?如何使用 TypeScript + Redux 从我的道具访问我的调度例程？
【发布时间】：2020-10-30 12:01:15
【问题描述】：

看看我在 TypeScript (storeSlice.ts) 中创建的以下切片：

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import axios from "axios";
import { AppThunk } from "../../app/store";
import { Summoner } from "../../models/Summoner";

export interface StoreState {
    summoners: Summoner[]
}

const initialState: StoreState = {
    summoners: []
}

export const storeSlice = createSlice({
    name: 'store',
    initialState,
    reducers: {
        getSummonersSuccess: (state: StoreState, action: PayloadAction<Summoner[]>) => {
            state.summoners = action.payload;
        }
    }
});

export const { getSummonersSuccess } = storeSlice.actions;

export const getSummoners = (): AppThunk => (dispatch) => {
    axios.get("api/summoners").then((response) => {
        dispatch(getSummonersSuccess(response.data));
    });
}

export default storeSlice.reducer;

这是非常基本的。它有一个StoreState 类型的初始状态，其中包含Summoner 类型的数组。

现在，使用该切片的组件如下所示 (Store.tsx)：

import React, { Dispatch } from 'react';
import { connect } from 'react-redux';
import { getSummoners, StoreState } from './storeSlice';

interface PropState {
    store: StoreState
}

const Store = (props: StoreState) => {
    console.log("store props", props); //This contains my "getSummoners" action, but I can't access it because it's not defined in "StoreState"
    return (
        <h1>Hello!</h1>
    );
}
const mapStateToProps = (state: PropState) => {
    console.log("Store state", state);
    return { summoners: state.store.summoners };
};
const mapDispatchToProps = (dispatch: Dispatch<any>) => {
    return {
        getSummoners: dispatch(getSummoners)
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Store);

当我在组件中记录道具时，我得到了我用mapStateToProps 映射的状态，我还得到了我用mapDispatchToProps 映射的getSummoners 动作。

但是，我实际上无法访问 getSummoners 操作，因为它未在 StoreState 中定义。

我不想在我创建的每个默认状态类型中都定义操作。

我可以做些什么来在我的代码中使用调度操作同时让 TypeScript 满意吗？

如果这个问题没有太大意义，我深表歉意，我对这个技术栈还很陌生。

【问题讨论】：

标签： reactjs typescript redux react-redux

【解决方案1】：

在您的mapDispatchToProps 中，您无意中调用了dispatch，而不是返回一个函数来从您的组件中调用dispatch。将其更改为：

const mapDispatchToProps = (dispatch: Dispatch<any>) => {
    return {
        getSummoners: () => dispatch(getSummoners)
    }
}

这应该可以解决您的问题。如果没有，请使用您遇到的确切错误更新您的帖子。

作为旁注，这个带有mapStateToProps 和mapDispatchToProps 的connect 高阶组件已经存在了一段时间，它曾经是从状态中获取数据到组件中的唯一方法。它仍然有效，但现在建议您改用较新的挂钩 useSelector 和 useDispatch。

【讨论】：