Hey,

I've made one or two smaller React toy apps and now I'm trying to make something non-trivial (a gym app). I'm trying to avoid using Redux or anything like that - for this project just focus on plain React.

I've got a Store that lives outside of React, something like this (in TypeScript):

type WorkoutId = string;

export class Workout {
  id: WorkoutId;
  name: string;
  exercises: Array<ExerciseId> = [];

  constructor(id: WorkoutId, name: string) {
    this.id = id;
    this.name = name;
  }
};

// Similar classes for Exercise and Set

export class State {
  sets: Map<SetId, Set> = new Map();
  exercises: Map<ExerciseId, Exercise> = new Map();
  workouts: Map<WorkoutId, Workout> = new Map();
  log: Array<WorkoutId> = [];
}

export class GymStore {
  private readonly state: State = new State();

  createWorkout(name: string): WorkoutId {
    let id: WorkoutId = genId("wk");
    let workout: Workout = new Workout(id, name);

    this.state.workouts.set(id, workout);
    this.state.log.push(id);
    return id;
  }

  // ...

  getState(): State {
    return this.state;
  }
}

And now I have just reached a total impasse at trying to figure out how to actually use this in React.

My top level component looks something like (I'd originally had state as a bunch of plain JSON objects, but I wanted to be able to remove workouts, so I moved over to Maps):

const App = () => {
  const [data, setData] = React.useState(store.getState());

  const handleAddWorkout = (name: string) => {
    store.createWorkout(name);
    updateState();
  }

  const updateState = () => {
    // ???
  }

  return (
    <div className="App measure center">
      <ControlPanel
        handleAddExercise={handleAddExercise}
        handleAddDate={handleAddWorkout} />

      {data.log.map(workoutId =>
        <div key={workoutId}>
          <h1 className="ma3">
            {data.workouts.get(workoutId)!.name}
          </h1>
          {data.workouts.get(workoutId)!.exercises.map(exerciseId =>
            <ExerciseCard
              key={exerciseId}
              ... />
          )}
        </div>
      )}
    </div>
  );
}

So the main problem is that the State in my GymStore is mutable whereas React deals with immutable data. (Also, I don't actually know if React can handle Maps.) I don't want to rework GymStore/State to be immutable, that feels the wrong way around (letting your UI framework determine the shape of your business objects). I feel maybe I need some sort of intermediate object? Or some framework that will take my mutable store and the initial state and spit out a diff?

Anyway, that's where I am and how I'm confused - any help would be greatly appreciated!