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;
};