openedx / openedx/frontend-app-authoring

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

Open
#2,312 0 comments 0 reactions 1 assignee View on GitHub

@ahtesham-quraish is already working on this.

Since Jul 23, 2025.

Dominant language
TypeScript
Stars
17
Forks
218
Avg merge
9d 20h
Merged PRs (30d)
20

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.