Refactoring Redux code: hooks, thunks, and redux-toolkit

[lindapaiste]

Most of the Redux code is this package was written years ago and has not been touched since. In that time, Redux has come a long way! The bad news is that this codebase goes against a lot of the Redux Best Practices. The good news is that the newer ways of doing things are much easier and involve a lot less boilerplate.

Some things which can be improved/changed:

• Can use createSlice which automatically creates the action creators for a reducer so that you don't need to define a bajillion constants or define basic action creator functions. This can be tackled one "slice" at a time, as Redux Toolkit is fully compatible with old/vanilla Redux.
• Can use createAsyncThunk to automatically dispatch pending, error and fulfilled actions for each asynchronous action.
• Can use useSelector and useDispatch hooks instead of the connect HOC.

I can do a lot of this myself, but I wanted to post it as a discussion first because I don't want to waste time rewriting code if it's not wanted.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[kjhollen]

thank you @lindapaiste! the editor is currently in maintenance mode as we transition to new leadership (see #2010). hope to have an update next month!

[mrkirthi-24]

Is this issue open?

[lindapaiste]

Is this issue open?

Yes! It's a broad topic and a lot of work has been done already but it's not complete.

As far as using hooks instead of connect, I think we've got that pretty much everywhere...if you include the PRs that haven't been merged.

We finally merged in a PR that enables Redux Toolkit but most of the reducers haven't been converted. I've only done the toast, assets, and ide so far.

We have not done anything yet with createAsyncThunk (or RTK query).

Maybe I need to make a checklist. If there's a particular piece that you want to work on you should search the open PRs to see if it's mentioned.

https://github.com/processing/p5.js-web-editor/pulls?q=is%3Apr+is%3Aopen+redux