如何使用TypeScript+Redux从道具访问调度例程

Question

看看我在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的快乐吗？

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

Answer 1

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

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

这应该能解决你的问题。如果没有，请用你得到的确切错误更新你的帖子。

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