Am I reinventing the wheel with this MobX / React pattern I made up?

Viewed 22

I started putting controller-like (e.g. cancelSelection()) functions in their own files (e.g. cancelSelection.js). These functions typically read and write to a variety of MobX stores. Stores are stored on the window and are abstracted behind a "getContext" function I invented. The React jsx calls these functions.

e.g.

// cancelSelection.js
import {getContext} from "./context"
export function cancelSelection() {
  const { rootStore: { selectionStore, toolbarStore } } = getContext();
  selectionStore.clear();
  toolbarStore.setTool(CURSOR);
}
// App.jsx
import { cancelSelection } from "./cancelSelection"
<button onClick={() => cancelSelection()}>Cancel Selection</button>

Pros

  • the test code can read them via the getContext() function.
  • it's easy to find the orchestrator I need in VS Code with Cmd+P 'cancelSel...'
  • keeps the jsx file smaller

Cons ...?

0 Answers
Related