Reactjs easy peasy:无法调用或分派操作
我最近从v2.6.6到最新(v5.0.3)的easy peasy有了巨大的飞跃,现在我以前使用的调度钩子不再工作了。我收到的错误是:Reactjs easy peasy:无法调用或分派操作,reactjs,react-redux,redux-thunk,easy-peasy,Reactjs,React Redux,Redux Thunk,Easy Peasy,我最近从v2.6.6到最新(v5.0.3)的easy peasy有了巨大的飞跃,现在我以前使用的调度钩子不再工作了。我收到的错误是: // note this isn't a typescript compilation error. The property of the dispatch object isn't defined TypeError: Cannot read property 'config' of undefined > 61 | const dispatchConf
// note this isn't a typescript compilation error. The property of the dispatch object isn't defined
TypeError: Cannot read property 'config' of undefined
> 61 | const dispatchConfig = dispatch.resource.config;
为了提供一些背景信息,以下是我如何通过React组件构建商店模型和使用的挂钩。为了创建商店的模型,我使用类执行以下操作。注意,这个模式已经在旧版本上运行,并且它似乎能够正确地实例化。换句话说,我确实看到了商店模型的正确构建,包括每个类中的所有动作/重击:
(store.ts)
ResourceStore对象上的嵌套ConfigResource实例化如下所示:
(config.resource.ts)
调试结果为空对象{},但悬停在每个属性上时,类型也会显示为解析:
(property) getAppInfo: ThunkCreator<void, any> | ThunkCreator<any, any>
我可以看到配置资源getAppInfo thunk处于状态。我就是不能打电话给调度部。任何帮助都将不胜感激。谢谢
export class ResourceStore {
public list = new ListResource();
public config = new ConfigResource();
}
export class ConfigResource extends Resource<any> {
public getAppInfo = thunk<ConfigResource, any, StoreModel>(
async (actions) => {
return fetch(`${process.env.PUBLIC_URL}/someFile.json`)
.then((res) => res.json())
.then((appInfo) => {
actions.setAppInfo(appInfo);
return appInfo;
});
}
);
// there are some other thunks and actions here...
}
export const MyApp = () => {
const history = useHistory();
const [routes, setRoutes] = useState<JSX.Element>();
const [loading, someState ] = useStoreState((state) => [
state.app.loading,
state.resource.config.someState
]);
const dispatch = useStoreDispatch();
// This is where the error occurs:
const dispatchConfig = dispatch.resource.config;
const dispatch: Dispatch<StoreModel, AnyAction>
(property) resource: RecursiveActions<ResourceStore>
(property) config: RecursiveActions<ConfigResource>
const configAction = useStoreActions((actions) => {
console.log(debug(actions));
});
(property) getAppInfo: ThunkCreator<void, any> | ThunkCreator<any, any>
const [
modal,
notification,
loading,
group,
user,
configResource,
] = useStoreState((state) => [
state.modal,
state.notification.target,
state.app.loading,
state.resource.user.group,
state.resource.user.target,
state.resource.config
]);