add Redux Starter Kit #961
Conversation
| return state; | ||
| } | ||
| } | ||
| type SetDeviceAction = PayloadAction<{ userDevice: UserDevice }>; |
There was a problem hiding this comment.
Can you use this type to type Dispatch? How does that work?
There was a problem hiding this comment.
I think you can't use it directly inside of Dispatch type definition. you should make the custom wrapper type definition to cover the strict bond between the component and the action creators.
However, I think we won't need to make the Dispatch definition anymore.
The official doc said that use export const { setDeviceType } = layoutSlice.actions; with connect and mapDispatchToProps.
If you follow the doc, you don't need the definition of action types and dispatch.
If you don't want to use connect API and want to handle it with hooks, I think you should make the custom type definition. (I omit it)
Mark(RSK maintainer) said he will update the type definition and use case with hooks API soon.
There was a problem hiding this comment.
That's true. Since the creators and reducers are created together by the same library, the library guarantees the correctness. So we don't need to type them.
| }; | ||
| } | ||
| const DeviceDetector: React.FC = () => { | ||
| const dispatch = useDispatch(); |
| case ACTION_TYPES.SET_DEVICE_TO_DESKTOP: { | ||
| return { ...state, userDevice: UserDevice.DESKTOP }; | ||
| } | ||
| export enum UserDevice { |
There was a problem hiding this comment.
FYI, I recently learned how to use enums within ambient types. Let me know if you think it would help you!
There was a problem hiding this comment.
sure. it would be helpful!
There was a problem hiding this comment.
Assuming your webpack is set up correctly, we just need to use the const enum.
Since d.ts files are not included in the bundle, a regular enum in a d.ts, which gets compiled to an object, will disappear with the rest of the d.ts file. But a const enum gets compiled to constant values (like 1) so the bundle will work regardless.
There was a problem hiding this comment.
I mention webpack because, in my case, the order of ts and js loaders somehow mattered. But you only use a TS loader, so it should be okay 🤞
There was a problem hiding this comment.
nice. thanks to ur comment, I've read https://www.typescriptlang.org/docs/handbook/enums.html#const-enums
I'll apply it soon. thanks for your attention!
# Conflicts: # package-lock.json
No description provided.