Simple code and demonstation of the transition from Redux MapStateToProps
and MapDispatchtoProps
to using useSelector
and useDispatcher
hooks.
The code is typed with TypeScript.
The overall change from MapXToProps to using built-in hooks can be seen in the diff c22c184...988ee06
The change from MapToProps to using custom hooks can be seen in the diff 1310a50...1c5d82f
-
Type checking was preserved throughout the changes.
-
Code size decreased when changing to built-in hooks.
-
Code size was equal when changing to custom hooks (not reused).
-
Component with hooks will rerender when parent rerenders, unlike with MapXToProps. However, this can easily be fixed with
React.useMemo
wrapping the component.
Overall, I do not see good reasons to keep using MapXToProps. Hooks seem more consise and readable.
- f553913 - Add a Redux store (Chat).
- 1310a50 - Replace mapStateToProps with useSelector.
- 988ee06 - Replace mapStateToProps/mapDispatchToProps with useSelector/useDispatch.
- 1c5d82f - Convert useSelector and useDispatch to custom hooks.
yarn
yarn start
yarn compile