@@ -719,11 +719,6 @@ interface InjectedProps {
719
719
export const withConnectedCount = <BaseProps extends InjectedProps >(
720
720
BaseComponent : React .ComponentType <BaseProps >
721
721
) => {
722
- type HocProps = Diff <BaseProps , InjectedProps > & {
723
- // here you can extend hoc with new props
724
- initialCount? : number ;
725
- };
726
-
727
722
const mapStateToProps = (state : RootState ) => ({
728
723
count: countersSelectors .getReduxCounter (state .counters ),
729
724
});
@@ -732,18 +727,24 @@ export const withConnectedCount = <BaseProps extends InjectedProps>(
732
727
onIncrement: countersActions .increment ,
733
728
};
734
729
735
- class Hoc extends React .Component <InjectedProps > {
730
+ type HocProps = ReturnType <typeof mapStateToProps > &
731
+ typeof dispatchProps & {
732
+ // here you can extend ConnectedHoc with new props
733
+ overrideCount? : number ;
734
+ };
735
+
736
+ class Hoc extends React .Component <HocProps > {
736
737
// Enhance component name for debugging and React-Dev-Tools
737
738
static displayName = ` withConnectedCount(${BaseComponent .name }) ` ;
738
739
// reference to original wrapped component
739
740
static readonly WrappedComponent = BaseComponent ;
740
741
741
742
render() {
742
- const { count, onIncrement, ... restProps } = this .props ;
743
+ const { count, onIncrement, overrideCount, ... restProps } = this .props ;
743
744
744
745
return (
745
746
<BaseComponent
746
- count = { count } // injected
747
+ count = { overrideCount || count } // injected
747
748
onIncrement = { onIncrement } // injected
748
749
{ ... (restProps as BaseProps )}
749
750
/>
@@ -754,7 +755,7 @@ export const withConnectedCount = <BaseProps extends InjectedProps>(
754
755
const ConnectedHoc = connect <
755
756
ReturnType < typeof mapStateToProps > ,
756
757
typeof dispatchProps , // use "undefined" if NOT using dispatchProps
757
- HocProps ,
758
+ Diff < BaseProps , InjectedProps > ,
758
759
RootState
759
760
> (
760
761
mapStateToProps ,
@@ -776,7 +777,7 @@ import { FCCounter } from '../components';
776
777
const FCCounterWithConnectedCount = withConnectedCount (FCCounter );
777
778
778
779
export default () => (
779
- <FCCounterWithConnectedCount initialCount = {5 } label = {' FCCounterWithState' } />
780
+ <FCCounterWithConnectedCount overrideCount = {5 } label = {' FCCounterWithState' } />
780
781
);
781
782
782
783
` ` `
@@ -1262,6 +1263,7 @@ export default store;
1262
1263
A solution below is using a simple factory function to automate the creation of type-safe action creators. The goal is to decrease maintenance effort and reduce code repetition of type annotations for actions and creators. The result is completely typesafe action-creators and their actions.
1263
1264
1264
1265
` ` ` tsx
1266
+ /* eslint-disable */
1265
1267
import { action } from ' typesafe-actions' ;
1266
1268
1267
1269
import { ADD , INCREMENT } from ' ./constants' ;
0 commit comments