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

[Ashish2271]

@lindapaiste i have gone through all the pr's and your work on this conversion i would like to work on rest of reducers and implentation of RTK query

[ASCE-D]

@lindapaiste i have gone through all the pr's and your work on this conversion i would like to work on rest of reducers and implentation of RTK query

I'm also interested in working on this issue, @Ashish2271 can we work on this together?

[shashwotbhattarai]

is this still open? i would like work on it too.

[PiyushChandra17]

@lindapaiste I totally agree that it's a broad topic, i can complete the remaining work since i have pretty solid understanding of how redux works under the hood, what goes behind the scenes (old + new). I think i am a right candidate for this task.

As far as using useSelector hook is concerned instead of HOC connect, WE have got it all covered.

Yes i have gone the PR thoroughly where we have merged and enabled the access of Redux-Toolkit in our codebase, and i can convert the rest of the reducers followed by RTK query (where we can automatically dispatch isLoading, error, refetch on a fly).

If you make a checklist, that would be great - we can resolve one checklist at a time, step by step. Gone through all the PR's related to refactoring which is mostly opened by you. I think lot of work is incomplete and i would try to complete one piece at a time.