Immutable Connect

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

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

1 Like

Awesome :grinning_face_with_smiling_eyes: :clap: :clap:

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.