Skip to content

Replace usage of connect with useSelector() and useDispatch() #1767

@diana-villalvazo-wgu

Description

@diana-villalvazo-wgu

Update the code and tests to get rid of the Internal export pattern. Example:
Before:

export default connect(editableFieldSelector, {
  onEdit: openForm,
  onCancel: closeForm,
})(EditableField);

After:

const EditableField = (props) => {
  const dispatch = useDispatch();
  const onEdit = (name) => dispatch(openForm(name));
  const onCancel = (name) => dispatch(closeForm(name));
...
export default EditableField

Once the HOCs (connect) are replaced with hooks, if it's necessary to mock redux state in tests, convert the tests to use initializeMocks from src/testUtils.tsx and pass in initialState to initializeMocks. Or useconst { reduxStore } = initializeMocks();and dispatch changes to the redux store.

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions