Redux和Utility

Question

我正在尝试编写一个实用工具类，它从Redux Action中的API调用中获取其数据。jobActions.getJobs()或只访问写入Redux状态this.props.jobList的数据

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

错误：“属性'props‘不存在于’类型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作为参数传递时，类型记录应该会给出上述错误。您通过编写JobsUtil as any来抑制错误，这是一种断言，它说：“相信我，这是一个反应组件”。但是它不是一个反应组件，所以你会遇到更多的问题。

您需要以某种方式将有关存储的信息传递给JobsUtil类，可能通过constructor。但最终我不认为class在这里是有意义的。我推荐一个实用工具钩子，这样您就可以通过使用useSelector和useDispatch挂钩来访问当前的存储实例。

也许是这样的：

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()方法？