score:0
i highly doubt this simple solution will work, but here is my suggestions for refactors.
please note that the way that your old class was written, that's not the recommended way of writing redux. sure, the code will work, but it's not the "right" way in many people's opinions.
refactor your actions
i would rather have my code written out like this :
yourcomponent.tsx
const currentsite = useselector((state) => state.selection.currentsite);
const currentcamera = useselector((state) => state.selection.currentcamera);
const dispatch = usedispatch();
const loadgraph = () => {
useeffect(() => {
if(currentsite)
getfloorplan(currensite.identif);
}, [ dispatch, currentsite.identif])
// dispatch is in the dependency array to stop make eslinter complain, you can remove it if you want, others are used to control the number of renders
};
yourcomponentactions.ts
// assuming you are using redux-thunk here
const getfloorplan = ( site : yourtype ) => async dispatch => {
console.log("fetched floorplan");
// remove await if getimage is a sync function, try with await first and remove if it doesn't fit
const response = await getimage(`api/graph/${site}/floorplan`, get_floorplan);
dispatch(getgraph(response))
}
const getgraph = (site : yourtype) => async dispatch => {
console.log("fetched model", realgraph.model);
// new camera-related node & link status
if (currentcamera) {
changeactivecamera(currentsite.identif,currentcamera.identif);
}
}
const changeactivecamera = ( site: yourtype, param: youranothertype ) => async dispatch => {
// your logic here
}
Source: stackoverflow.com
Related Query
- converted class to hooks, getting Property 'then' does not exist on type '(dispatch: any) => Promise<void>'
- converting class to hooks getting Property 'then' does not exist on type '(dispatch: any) => Promise<void>'.ts(2339)
- react hooks and typescript - Property '***' does not exist on type 'never'
- React Hooks with typescript: Property 'data' does not exist on type
- Getting TS Error: Property 'user' does not exist on type 'IAuth | null'
- React, Typescript, Hooks - Property 'state' does not exist on type
- Property 'setTabChange' does not exist on type 'never'. (React hooks Typescript) using ref
- TypeScript errors in React Class Component property does not exist on type 'Readonly<{}>', not sure how to set types for state
- when I try to destructing the data from react query I am getting Property 'data' does not exist on type 'void'
- Getting Property 'height' does not exist on type 'string' TypeScript Error
- Property 'value' does not exist on type 'Readonly<{}>'
- TypeScript error: Property 'X' does not exist on type 'Window'
- typescript + react/redux: property "yyy" does not exist on type 'intrinsicattributes & intrinsicclassattributes
- Typescript complains Property does not exist on type 'JSX.IntrinsicElements' when using React.createClass?
- error TS2339: Property 'for' does not exist on type 'HTMLProps<HTMLLabelElement>'
- TypeScript error after upgrading version 4 useParams () from react-router-dom Property 'sumParams' does not exist on type '{}'
- Property 'exact' does not exist on type
- Property 'toBeInTheDocument' does not exist on type 'Matchers<any>'
- Trigger click in Typescript - Property 'click' does not exist on type 'Element'
- Property does not exist on type 'DetailedHTMLProps, HTMLDivElement>' with React 16
- TS2339: Property 'tsReducer' does not exist on type 'DefaultRootState'
- Property ... does not exist on type 'IntrinsicAttributes & ...'
- Property 'XYZ' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'
- Property 'hot' does not exist on type 'NodeModule'.ts(2339)
- TS2339: Property 'props' does not exist on type 'Home'
- TypeScript error: Property 'children' does not exist on type 'ReactNode'
- TypeScript error: Property 'scrollIntoView' does not exist on type 'never'. TS2339
- Property 'value' does not exist on type 'never'. when use useRef hook in mui
- ts(2322) Property children does not exist on type 'Intrinsic attributes and Props'
- Property does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'
More Query from same tag
- React Higher Order Components
- Why does reducer return undefined when returning false?
- datepicker is traped inside the button menu
- How do I customize row and column for 'react-table' library?
- How to avoid recursive dependencies in useEffect hook
- Complex async flow that failed to execute as expected
- React JSX rendering with axios response
- React Mixed content error while loading bundle.js (Http/ Https)
- Redirect doesn't work after registering a new user to the db (express, mongoose, react)
- How to cover anonymous function used in react router by jest?
- How to catch undeclared variable in React with ESLint?
- React JS - input onChange event not setting phone number as valid until 1 extra character typed
- Can't Build Gatsby With UseAxios, It Raise Error : UnhandledPromiseRejectionWarning: Error: connect ECONNREFUSED 127.0.0.1:80
- How to do multiple fetch requests
- ReactJS: Why shouldn't I mutate nested state?
- Is there a way to traverse tree built by React?
- How do I make ESlint less stringent while working with Prettier in a React project (with Material-UI)?
- How to add script to react app in index.html
- How to get a clicked element in React?
- Trying to load content with useEffect and context
- Getting data from firebase with axios and useEffect
- How can I clear the state in React.js?
- React - Axios put request to update only specific fields
- What's the proper way to pass dependencies between components in React?
- Prop passing data information, but not reading properties
- React: Get DOM data from sibling elements
- Docker MERN Deployment - hot reload is not working
- How can I test if a blur event happen in onClick event handler?
- how to pass function variable from one file to another in react
- Where do I put static files in my React.JS app?