Reuse connected ConnectedField, ConnectedFields and ConnectedFieldArray

[huan086]

Redux connect() returns a new class. Currently, each ConnectedField, ConnectedFields and ConnectedFieldArray is connected to redux, thus creating many classes. This change connects ConnectedField, ConnectedFields and ConnectedFieldArray only once.

In a field array, if we would like to preserve state of our component, we need to use a key that identifies the element, instead of array index. However, doing so, Field, Fields and FieldArray detects that it is now bound to a new field name and discards the old connected class and connect again. React sees that the class is different, thus discards the old virtual DOM, along with the component and its state.

By using mapStateToProps(state, ownProps) and mapDispatchToProps(dispatch, ownProps), we can dynamically map according to the current ownProps.name or ownProps.names, thus ConnectedField, ConnectedFields and ConnectedFieldArray only needs to be connected once. React will see the same class and reuse the virtual DOM, preserving our component and its state.

[codecov-io]

Current coverage is 100% (diff: 100%)

Merging #1734 into master will not change coverage

@@           master   #1734   diff @@
=====================================
  Files          52      52          
  Lines        1115    1135    +20   
  Methods         0       0          
  Messages        0       0          
  Branches        0       0          
=====================================
+ Hits         1115    1135    +20   
  Misses          0       0          
  Partials        0       0          

Powered by Codecov. Last update 9186bd3...6f93372

[erikras]

Published in v6.0.3.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.