Immutable Connect

👨‍💻 Framework Development » Framework Design
1

I’ve started studying how an immutable version of Connect could work. I tried an implementation based on immer and I’m trying another one now using valtio.

The goals are:

  1. Take advantage of the Redux DevTools (as opposed to creating our own DevTools).
  2. Prepare it for Concurrent mode (immutable state managers are a better fit for Concurrent).
  3. Add action/state hooks (this will supersede the Frontity Hooks).

Extra goals can be:

  • Finally figure out how to create nested derived state.

Open questions:

  • Switch to a setter function: setState(s => s.x = "x") vs state.x = "x". This would add compatibility with old browsers and would easy the implementation.

This might or might not require a backward compatible change, depending on the final API (so Frontity v2), but it is a possibility.

I’ve recorded a video with a summary of the current status:

And this is the codesandbox I am using: Immutable Connect (with valtio) - CodeSandbox

2

Adding the DevTools sync action messages was pretty straighforward! :smiley:

1 Like
3

Awesome :grinning_face_with_smiling_eyes: :clap: :clap:

4

I have advanced a bit more and refactored it a little bit.

I am still working on CS, but I am doing commits to a repo now. It’s not the final repo but more a way to save the work and go back if I need to :slightly_smiling_face:

Next steps: I want to do a couple of optimizations, finish the types of Derived and start working on the proxification of the store when passed to actions/components.

I am confident that I will be able to show who triggered the action/mutation in the Redux DevTools. I think we could use the action object to log it:

{
  "type": "actions.router.set",
  "triggered-by": "Link",
  "arguments": {
    "arg-1": "/next-post"
  }
}

{
  "type": "actions.source.fetch (async mutation)",
  "triggered-by": "actions.router.set"
}

State diff in both cases is shown in the Redux DevTools automatically.

5

I was not able to run the codesandbox nor the repo successfully. In the codesandbox it seems that there is a bug in the createStore()

Screen Shot 2021-06-15 at 18.00.21
Screen Shot 2021-06-15 at 18.00.212520×964 397 KB

I see that the repo has the same issue, but I wasn’t even able to run it because of an issue in react-scripts :sweat_smile: :

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'

I would normally try to fix the bug, but I think that the offending snippet :point_down: is not possible (you cannot pass store to the wrapActions() ) so I’m not sure what the intention here was:

  // Init the store to pass its reference to the wrappers.
  const store: ResolveStore<Store> = {
    state: wrapState(mutableState),
    actions: wrapActions(store, initialStore.actions)
  };

Could you help me out @luisherranz ? :slight_smile:

6

Absolutely my fault Michal, sorry. I was in the middle of a refactoring because I think making a Store class will simplify the types a lot.

You can clone the repo and go back to the previous commit: Commits · luisherranz/immutable-connect · GitHub