React-Redux and Utility class

Question

我正在尝试编写一个实用程序类，该实用程序类从Redux操作中进行的API调用中获取其数据。jobActions.getJobs()或 只需访问已写入 Redux 状态的数据this.props.jobList

但这是一个简单的类，没有传递给它的道具。而且我无法访问类外的 getJobs() 函数

错误："属性'道具'在类型'类型'JobsUtil'上不存在。

我如何让它工作？

export class JobsUtil {
// get jobs from API
public static getJobs(): Array<IDropDownOptions> {
const jobsList = this.props.jobActions.getJobs()
return jobsList;    
}
}
function mapStateToProps(state) {
return {
jobList: state.toJS().jobList
};
}
function mapDispatchToProps(dispatch) {
return {
jobActions: bindActionCreators<any, Dispatch>(jobActions, dispatch),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(JobsUtil as any)

Answer 1

connect

旨在与 React 组件进行交互。 您不能connect任何其他类型的类。

Argument of type 'typeof JobsUtil' is not assignable to parameter of type 'ComponentType<never>'.
Type 'typeof JobsUtil' is not assignable to type 'ComponentClass<never, any>'.
Type 'JobsUtil' is missing the following properties from type 'Component<never, any, any>': context, setState, forceUpdate, render, and 3 more.

当您将JobsUtil作为参数传递时，Typescript 应该会给您上述错误。 您通过编写JobsUtil as any来抑制错误，这是一个断言，说"相信我，这是一个 React 组件"。 但它不是 React 组件，所以你以后会遇到问题。

---

您需要以某种方式将有关商店的信息传递给JobsUtil类，可能通过constructor。 但最终我认为class在这里没有意义。 我推荐一个实用程序钩子，以便您可以使用useSelector和useDispatch钩子通过 React 上下文访问当前存储实例。

也许是这样的：

export const useJobActions = () => {
const dispatch = useDispatch();
return bindActionCreators(jobActions, dispatch);
}

export const useGetJobs = () => {
const {getJobs} = useJobActions();
const jobsList = useSelector(state => state.jobList);
useEffect( () => {
if (! jobsList) {
getJobs();
}
}, [getJobs, jobsList]);
return jobsList;
}

---

另外，为什么你的state会有toJS()的方法？