From 1ebcca2607b18a867e26311ee599aef87aa84234 Mon Sep 17 00:00:00 2001 From: Lazy <2818242447@qq.com> Date: Tue, 19 May 2026 10:41:33 +0800 Subject: [PATCH 1/2] docs: add connect factory props example --- README.md | 78 +++++++++++++++++++ README_SOURCE.md | 8 ++ .../fc-counter-connected-factory.tsx | 53 +++++++++++++ .../fc-counter-connected-factory.usage.tsx | 10 +++ playground/src/connected/index.ts | 1 + 5 files changed, 150 insertions(+) create mode 100644 playground/src/connected/fc-counter-connected-factory.tsx create mode 100644 playground/src/connected/fc-counter-connected-factory.usage.tsx diff --git a/README.md b/README.md index 647b5c7..702b976 100644 --- a/README.md +++ b/README.md @@ -111,6 +111,7 @@ I highly recommend to add a bounty to the issue that you're waiting for to incre - [Redux Connected Components](#redux-connected-components) - [- Redux connected counter](#--redux-connected-counter) - [- Redux connected counter with own props](#--redux-connected-counter-with-own-props) + - [- Redux connected counter with factory props](#--redux-connected-counter-with-factory-props) - [- Redux connected counter via hooks](#--redux-connected-counter-via-hooks) - [- Redux connected counter with `redux-thunk` integration](#--redux-connected-counter-with-redux-thunk-integration) - [Context](#context) @@ -1063,6 +1064,83 @@ export default () => ( [⇧ back to top](#table-of-contents) +### - Redux connected counter with factory props + +```tsx +import Types from 'MyTypes'; +import { connect, MapStateToPropsFactory } from 'react-redux'; + +import { countersActions, countersSelectors } from '../features/counters'; +import { FCCounter } from '../components'; + +type OwnProps = { + initialCount?: number; +}; + +type StateProps = { + count: number; +}; + +const makeMapStateToProps: MapStateToPropsFactory< + StateProps, + OwnProps, + Types.RootState +> = () => { + let previousCount: number | undefined; + let previousInitialCount: number | undefined; + let previousResult: StateProps | undefined; + + return (state: Types.RootState, ownProps: OwnProps) => { + const count = countersSelectors.getReduxCounter(state.counters); + const initialCount = ownProps.initialCount || 0; + + if ( + previousResult && + previousCount === count && + previousInitialCount === initialCount + ) { + return previousResult; + } + + previousCount = count; + previousInitialCount = initialCount; + previousResult = { + count: count + initialCount, + }; + + return previousResult; + }; +}; + +const dispatchProps = { + onIncrement: countersActions.increment, +}; + +export const FCCounterConnectedFactory = connect( + makeMapStateToProps, + dispatchProps +)(FCCounter); + +``` +
Click to expand

+ +```tsx +import * as React from 'react'; + +import { FCCounterConnectedFactory } from './fc-counter-connected-factory'; + +export default ( +

+ + +
+); + +``` +

+ +[⇧ back to top](#table-of-contents) + ### - Redux connected counter via hooks ```tsx diff --git a/README_SOURCE.md b/README_SOURCE.md index 358fcc3..74e84f1 100644 --- a/README_SOURCE.md +++ b/README_SOURCE.md @@ -111,6 +111,7 @@ I highly recommend to add a bounty to the issue that you're waiting for to incre - [Redux Connected Components](#redux-connected-components) - [- Redux connected counter](#--redux-connected-counter) - [- Redux connected counter with own props](#--redux-connected-counter-with-own-props) + - [- Redux connected counter with factory props](#--redux-connected-counter-with-factory-props) - [- Redux connected counter via hooks](#--redux-connected-counter-via-hooks) - [- Redux connected counter with `redux-thunk` integration](#--redux-connected-counter-with-redux-thunk-integration) - [Context](#context) @@ -456,6 +457,13 @@ Adds error handling using componentDidCatch to any component [⇧ back to top](#table-of-contents) +### - Redux connected counter with factory props + +::codeblock='playground/src/connected/fc-counter-connected-factory.tsx':: +::expander='playground/src/connected/fc-counter-connected-factory.usage.tsx':: + +[⇧ back to top](#table-of-contents) + ### - Redux connected counter via hooks ::codeblock='playground/src/hooks/react-redux-hooks.tsx':: diff --git a/playground/src/connected/fc-counter-connected-factory.tsx b/playground/src/connected/fc-counter-connected-factory.tsx new file mode 100644 index 0000000..10ed9fe --- /dev/null +++ b/playground/src/connected/fc-counter-connected-factory.tsx @@ -0,0 +1,53 @@ +import Types from 'MyTypes'; +import { connect, MapStateToPropsFactory } from 'react-redux'; + +import { countersActions, countersSelectors } from '../features/counters'; +import { FCCounter } from '../components'; + +type OwnProps = { + initialCount?: number; +}; + +type StateProps = { + count: number; +}; + +const makeMapStateToProps: MapStateToPropsFactory< + StateProps, + OwnProps, + Types.RootState +> = () => { + let previousCount: number | undefined; + let previousInitialCount: number | undefined; + let previousResult: StateProps | undefined; + + return (state: Types.RootState, ownProps: OwnProps) => { + const count = countersSelectors.getReduxCounter(state.counters); + const initialCount = ownProps.initialCount || 0; + + if ( + previousResult && + previousCount === count && + previousInitialCount === initialCount + ) { + return previousResult; + } + + previousCount = count; + previousInitialCount = initialCount; + previousResult = { + count: count + initialCount, + }; + + return previousResult; + }; +}; + +const dispatchProps = { + onIncrement: countersActions.increment, +}; + +export const FCCounterConnectedFactory = connect( + makeMapStateToProps, + dispatchProps +)(FCCounter); diff --git a/playground/src/connected/fc-counter-connected-factory.usage.tsx b/playground/src/connected/fc-counter-connected-factory.usage.tsx new file mode 100644 index 0000000..c682fed --- /dev/null +++ b/playground/src/connected/fc-counter-connected-factory.usage.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; + +import { FCCounterConnectedFactory } from './fc-counter-connected-factory'; + +export default ( +
+ + +
+); diff --git a/playground/src/connected/index.ts b/playground/src/connected/index.ts index be23774..fff72af 100644 --- a/playground/src/connected/index.ts +++ b/playground/src/connected/index.ts @@ -1,3 +1,4 @@ export * from './fc-counter-connected-bind-action-creators'; +export * from './fc-counter-connected-factory'; export * from './fc-counter-connected-own-props'; export * from './fc-counter-connected'; From 136a34d868ceb710d4c9c5eee39ea2d530515da6 Mon Sep 17 00:00:00 2001 From: Lazy <2818242447@qq.com> Date: Sat, 6 Jun 2026 20:27:39 +0800 Subject: [PATCH 2/2] fix: include label in connected factory props --- README.md | 1 + playground/src/connected/fc-counter-connected-factory.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/README.md b/README.md index 702b976..f7db112 100644 --- a/README.md +++ b/README.md @@ -1074,6 +1074,7 @@ import { countersActions, countersSelectors } from '../features/counters'; import { FCCounter } from '../components'; type OwnProps = { + label: string; initialCount?: number; }; diff --git a/playground/src/connected/fc-counter-connected-factory.tsx b/playground/src/connected/fc-counter-connected-factory.tsx index 10ed9fe..9ed0b3f 100644 --- a/playground/src/connected/fc-counter-connected-factory.tsx +++ b/playground/src/connected/fc-counter-connected-factory.tsx @@ -5,6 +5,7 @@ import { countersActions, countersSelectors } from '../features/counters'; import { FCCounter } from '../components'; type OwnProps = { + label: string; initialCount?: number; };