openedx / openedx/frontend-app-authoring
Replace usage of connect with useSelector() and useDispatch()
Open
@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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.