Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CHORE] Provide types for react-redux hooks #3354

Merged
merged 3 commits into from
Jan 3, 2025
Merged

Conversation

simensma-fresh
Copy link
Collaborator

@simensma-fresh simensma-fresh commented Dec 19, 2024

Objective

CHORE

This PR adds typed versions of common react-redux hooks as per https://react-redux.js.org/using-react-redux/usage-with-typescript.

Using those hooks will have the types defined in your action creators propagate or if those are untyped, will be any
redux-form actions is supported in addition to our actions

Before:

image
image
image

After:
image
image
image

asinn134
asinn134 previously approved these changes Dec 19, 2024
@simensma-fresh
Copy link
Collaborator Author

If anyone feels like a good cleanup here's a regex (thanks copilot) that (maybe) will replace all our useDispatch hooks to use the new one...

Search:
import\s*\{\s*([^,}]*)\s*,?\s*\buseDispatch\b\s*,?\s*([^,}]*)\s*\}\s*from\s*['"]react-redux['"];

Replace:
import { useAppDispatch as useDispatch } from "@mds/common/redux/rootState";\nimport { $1$2 } from 'react-redux';

Copy link

Quality Gate Passed Quality Gate passed for 'bcgov-sonarcloud_mds_minespace-web'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Copy link

Quality Gate Failed Quality Gate failed for 'bcgov-sonarcloud_mds_common'

Failed conditions
D Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

Copy link

type AppAction = UnknownAction | FormAction;

// Infer the `RootState` and `AppDispatch` types from the store itself + make sure redux-form acti are captured as well.
export type AppDispatch = typeof store.dispatch & Dispatch<AppAction>;
Copy link
Collaborator Author

@simensma-fresh simensma-fresh Dec 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sonarcloud doesn't like this & operator. Unfortunately needed as AppAction is coming from redux-form and couldn't find a way of avoiding it without providing our own redux-form typing

Copy link
Collaborator

@taraepp taraepp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙌

@taraepp taraepp merged commit 0a1289e into develop Jan 3, 2025
15 of 16 checks passed
@taraepp taraepp deleted the chore-redux-typing branch January 3, 2025 17:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants