processing / processing/p5.js-web-editor
Mutation in `files` Redux reducer
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.7k
- Forks
- 1.7k
- Avg merge
- 3d 4h
- Merged PRs (30d)
- 8
Description
I am working on setting up the Redux store using the @reduxjs/toolkit configureStore function, which automatically includes a lot of functionality such as thunk, dev tools, and a check for state mutations in reducers. That check immediately found one!

The problematic code is in the default case of the reducer, which means that it runs every single time that an action is dispatched anywhere in the store (which is why the error showed up when handling an unrelated action). So that's not the right place. The sorting of children should happen only when children are added, removed, or renamed.
Alternatively, the store state could be unsorted and the sorting could be applied in a selector function. That would require changes to components which access the state.files directly, rather than through some selectFiles function which could sort.
I could try to fix the mutation within the current reducer code but this will be an extremely satisfying reducer to rewrite using Redux Toolkit (RTK). There are many changes to deeply-nested properties, and those are such a pain to write properly without mutations! It will be so much cleaner and nicer and easier to read if it's written using RTK, where you can mutate a draft version of the state. Related docs.
We actually have this same sort of mutation in multiple places, including the CREATE_FILE and UPDATE_FILE_NAME cases. This is a mutation because each file object in the mapped array is the same object instance as in the original array, and therefore cannot be modified. But that's hard to understand and I definitely think that best long-term solution is to use RTK.
https://github.com/processing/p5.js-web-editor/blob/b3e49dab26417aa1f5492ef08984429a1dc64ef1/client/modules/IDE/reducers/files.js#L234-L239
https://github.com/processing/p5.js-web-editor/blob/b3e49dab26417aa1f5492ef08984429a1dc64ef1/client/modules/IDE/reducers/files.js#L218-L223
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.
Research direction
Start with client/modules/IDE/reducers/files.js at lines 277-281, then inspect the related CREATE_FILE and UPDATE_FILE_NAME cases at lines 234-239 and 218-223. Determine whether the reducer should be rewritten with Redux Toolkit or otherwise avoid mutations, and verify that the configureStore mutation check no longer reports errors for unrelated actions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100