From c7775e8ed8e36bb818848267ee5826e43b4ef492 Mon Sep 17 00:00:00 2001 From: Narutama Aurum Date: Sat, 23 May 2026 14:53:08 +0800 Subject: [PATCH 1/2] docs: refresh outdated bindActionCreators guidance --- README.md | 28 +++++++++------------------- README_SOURCE.md | 28 +++++++++------------------- 2 files changed, 18 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 647b5c7..b7ffc25 100644 --- a/README.md +++ b/README.md @@ -1775,7 +1775,6 @@ _**NOTE**: Below you'll find a short explanation of concepts behind using `conne ```tsx import MyTypes from 'MyTypes'; -import { bindActionCreators, Dispatch, ActionCreatorsMapObject } from 'redux'; import { connect } from 'react-redux'; import { countersActions } from '../features/counters'; @@ -1788,16 +1787,11 @@ const mapStateToProps = (state: MyTypes.RootState, ownProps: FCCounterProps) => count: state.counters.reduxCounter, }); -// "dispatch" argument needs an annotation to check the correct shape -// of an action object when using dispatch function -const mapDispatchToProps = (dispatch: Dispatch) => - bindActionCreators({ - onIncrement: countersActions.increment, - }, dispatch); - -// shorter alternative is to use an object instead of mapDispatchToProps function -const dispatchToProps = { - onIncrement: countersActions.increment, +// Prefer the object shorthand for plain action creators. +// It keeps the example aligned with current react-redux usage and +// still infers the injected prop types correctly. +const dispatchProps = { + onIncrement: countersActions.increment, }; // Notice we don't need to pass any generic type parameters to neither @@ -1805,14 +1799,10 @@ const dispatchToProps = { // because type inference will infer types from arguments annotations automatically // This is much cleaner and idiomatic approach export const FCCounterConnected = - connect(mapStateToProps, mapDispatchToProps)(FCCounter); - -// You can add extra layer of validation of your action creators -// by using bindActionCreators generic type parameter and RootAction type -const mapDispatchToProps = (dispatch: Dispatch) => - bindActionCreators>({ - invalidActionCreator: () => 1, // Error: Type 'number' is not assignable to type '{ type: "todos/ADD"; payload: Todo; } | { ... } - }, dispatch); + connect(mapStateToProps, dispatchProps)(FCCounter); + +// Keep the function form when you need access to `dispatch` +// directly (for example in the thunk integration example below). ``` diff --git a/README_SOURCE.md b/README_SOURCE.md index 358fcc3..165b633 100644 --- a/README_SOURCE.md +++ b/README_SOURCE.md @@ -669,7 +669,6 @@ _**NOTE**: Below you'll find a short explanation of concepts behind using `conne ```tsx import MyTypes from 'MyTypes'; -import { bindActionCreators, Dispatch, ActionCreatorsMapObject } from 'redux'; import { connect } from 'react-redux'; import { countersActions } from '../features/counters'; @@ -682,16 +681,11 @@ const mapStateToProps = (state: MyTypes.RootState, ownProps: FCCounterProps) => count: state.counters.reduxCounter, }); -// "dispatch" argument needs an annotation to check the correct shape -// of an action object when using dispatch function -const mapDispatchToProps = (dispatch: Dispatch) => - bindActionCreators({ - onIncrement: countersActions.increment, - }, dispatch); - -// shorter alternative is to use an object instead of mapDispatchToProps function -const dispatchToProps = { - onIncrement: countersActions.increment, +// Prefer the object shorthand for plain action creators. +// It keeps the example aligned with current react-redux usage and +// still infers the injected prop types correctly. +const dispatchProps = { + onIncrement: countersActions.increment, }; // Notice we don't need to pass any generic type parameters to neither @@ -699,14 +693,10 @@ const dispatchToProps = { // because type inference will infer types from arguments annotations automatically // This is much cleaner and idiomatic approach export const FCCounterConnected = - connect(mapStateToProps, mapDispatchToProps)(FCCounter); - -// You can add extra layer of validation of your action creators -// by using bindActionCreators generic type parameter and RootAction type -const mapDispatchToProps = (dispatch: Dispatch) => - bindActionCreators>({ - invalidActionCreator: () => 1, // Error: Type 'number' is not assignable to type '{ type: "todos/ADD"; payload: Todo; } | { ... } - }, dispatch); + connect(mapStateToProps, dispatchProps)(FCCounter); + +// Keep the function form when you need access to `dispatch` +// directly (for example in the thunk integration example below). ``` From efd54aba4a817a58866be4c8cbc8d51234d3c850 Mon Sep 17 00:00:00 2001 From: Narutama Aurum Date: Sat, 23 May 2026 18:15:15 +0800 Subject: [PATCH 2/2] docs: tighten connect example wording --- README.md | 14 +++++++------- README_SOURCE.md | 14 +++++++------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index b7ffc25..9bd13f7 100644 --- a/README.md +++ b/README.md @@ -1780,9 +1780,9 @@ import { connect } from 'react-redux'; import { countersActions } from '../features/counters'; import { FCCounter } from '../components'; -// Type annotation for "state" argument is mandatory to check -// the correct shape of state object and injected props you can also -// extend connected component Props interface by annotating `ownProps` argument +// Annotating the `state` argument checks the root-state shape. +// You can also extend the connected component props interface by +// annotating the `ownProps` argument. const mapStateToProps = (state: MyTypes.RootState, ownProps: FCCounterProps) => ({ count: state.counters.reduxCounter, }); @@ -1794,10 +1794,10 @@ const dispatchProps = { onIncrement: countersActions.increment, }; -// Notice we don't need to pass any generic type parameters to neither -// the connect function below nor map functions declared above -// because type inference will infer types from arguments annotations automatically -// This is much cleaner and idiomatic approach +// Notice that we do not need to pass explicit generic parameters to +// `connect` or to the mapping functions declared above. +// Type inference derives them automatically from the annotated inputs, +// which keeps the example cleaner and more idiomatic. export const FCCounterConnected = connect(mapStateToProps, dispatchProps)(FCCounter); diff --git a/README_SOURCE.md b/README_SOURCE.md index 165b633..c3d7f04 100644 --- a/README_SOURCE.md +++ b/README_SOURCE.md @@ -674,9 +674,9 @@ import { connect } from 'react-redux'; import { countersActions } from '../features/counters'; import { FCCounter } from '../components'; -// Type annotation for "state" argument is mandatory to check -// the correct shape of state object and injected props you can also -// extend connected component Props interface by annotating `ownProps` argument +// Annotating the `state` argument checks the root-state shape. +// You can also extend the connected component props interface by +// annotating the `ownProps` argument. const mapStateToProps = (state: MyTypes.RootState, ownProps: FCCounterProps) => ({ count: state.counters.reduxCounter, }); @@ -688,10 +688,10 @@ const dispatchProps = { onIncrement: countersActions.increment, }; -// Notice we don't need to pass any generic type parameters to neither -// the connect function below nor map functions declared above -// because type inference will infer types from arguments annotations automatically -// This is much cleaner and idiomatic approach +// Notice that we do not need to pass explicit generic parameters to +// `connect` or to the mapping functions declared above. +// Type inference derives them automatically from the annotated inputs, +// which keeps the example cleaner and more idiomatic. export const FCCounterConnected = connect(mapStateToProps, dispatchProps)(FCCounter);