c96cd87967
I find it much more legible this way.
Some thoughts… as part of refactoring it, I made some of the redux selectors more formal, and made use of reselect more thoroughly. this resulted in a reduction in re-renders from 16 to 12 on your average page load. It’s also a bit more verbose, accounting for some of the increased line count.
I hadn’t tried it before, but found the memoize method of comparing previous props/state to current props/state to be very, very nice. Much easier than manually comparing props, and much clearer to me than using react hooks’ dependency arrays.
The lack of dependency arrays feels really freeing in general to me. They’ve been such a source of hard-to-track-down bugs, and the hooks linter does not always suggest the right solution for what belongs in and out of the array.
Function names are nice. We had a ton of custom hooks in there so that we could put names to otherwise anonymous bits of functionality.
Also note: this component has a test suite. It passed without any changes. 🥳
|Build Status| |Coveralls| |npm_version| |npm_downloads| |license| frontend-app-learning ========================= Please tag **@edx/teaching-and-learning** on any PRs or issues. Thanks. Introduction ------------ React app for edX learning. .. |Build Status| image:: https://api.travis-ci.org/edx/frontend-app-learning.svg?branch=master :target: https://travis-ci.org/edx/frontend-app-learning .. |Coveralls| image:: https://img.shields.io/coveralls/edx/frontend-app-learning.svg?branch=master :target: https://coveralls.io/github/edx/frontend-app-learning .. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-app-learning.svg :target: @edx/frontend-app-learning .. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-app-learning.svg :target: @edx/frontend-app-learning .. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-learning.svg :target: @edx/frontend-app-learning Development ----------- Start Devstack ^^^^^^^^^^^^^^ To use this application `devstack <https://github.com/edx/devstack>`__ must be running and you must be logged into it. - Start devstack - Log in (http://localhost:18000/login) Start the development server ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ In this project, install requirements and start the development server by running: .. code:: bash npm install npm start # The server will run on port 1995 Once the dev server is up, visit http://localhost:2000/course/course-v1:edX+DemoX+Demo_Course to view the demo course. You can replace ``course-v1:edX+DemoX+Demo_Course`` with a different course key.