Using Redux with the Interactivity API

[luisherranz]

⚠️ Attention: Using Redux with the Interactivity API is not recommended.

It will be less performant (it will cause unnecessary rerenders and the JS size will increase) and compatibility with directives won't be guaranteed, so it should be used only as a migration path when there is an existing Redux store.

---

@DAreRodz and I have been testing patterns to consume state from Redux with the Interactivity API. It's certainly possible, although it has some caveats because you cannot use their hooks (useSelector, useDispatch) in all the directives.

To make it work the first thing you need to do is to add a new directive that injects the provider in the tree:

import { Provider } from "react-redux";
import store from "./store";

directive("redux-provider", ({ props: { children } }) => {
  return <Provider store={store}>{children}</Provider>;
});

Then, you need to add it to the root element of your block:

<div data-wp-interactive data-wp-redux-provider>...</div>

Now, you can access useSelector and useDispatch in your callbacks.

Using useSelector in the state is easy, you just have to create a function and use it inside:

import { useSelector } from "react-redux";

store({
  state: {
    counter: () => useSelector((state) => state.counter.value),
  },
});

<div data-wp-interactive data-wp-redux-provider>
  <div data-wp-text="state.counter"></div>
</div>

This is not technically state, so maybe it'd be better to add it to selectors instead. Also, it cannot be used inside actions for the reasons I explain below.

Using useDispatch is more difficult because the wp-on callbacks don't run in the scope of the component, but in the event handler and therefore cannot use hooks.

Just to give you an idea of how this works internally, it'd be something like this (simplified):

const Directives = ({ children, Type, ...props }) => {
  const eventHandler = () => {
    // The `wp-on` callbacks run here, where you cannot use `useDispatch`.
  };
  return (
    <Type onClick={eventHandler} {...props}>
      {children}
    </Type>
  );
};

These are all the options that we explored:

1. Create a new wp-redux-on directive

This directive runs the useDispatch in the scope of the Directives component and passes it down to the action:

import { useDispatch } from "react-redux";

directive(
  "redux-on",
  ({ directives: { "redux-on": reduxOn }, element, evaluate, context }) => {
    const contextValue = useContext(context);
    const dispatch = useDispatch(); // run it in the component scope
    Object.entries(reduxOn).forEach(([name, path]) => {
      element.props[`on${name}`] = (event) => {
        evaluate(path, {
          event,
          dispatch, // pass it down
          context: contextValue,
          ref: element.ref.current,
        });
      };
    });
  }
);

Then, the action can access dispatch:

import { increment } from "./counter";

store({
  actions: {
    increment: ({ dispatch }) => {
      dispatch(increment());
    },
  },
});

<div data-wp-interactive data-wp-redux-provider>
  <div data-wp-text="state.counter"></div>
  <button data-wp-redux-on--click="actions.increment">inc</button>
</div>

Stackblitz

2. Pass the dispatch function using a scope object shared across all the directives

Another idea is to create a scope object that is shared across all the directives that run in a single element. Using it, you could use wp-evaluate to run useDispatch and add it to the scope. Then, the action would get it from scope.dispatch.

The introduction of a wp-evaluate directive and how it works is explained here.

import { useDispatch } from "react-redux";
import { increment } from "./counter";

store({
  actions: {
    increment: ({ scope }) => {
      scope.dispatch(increment());
    },
  },
  evaluate: {
    useDispatch: ({ scope }) => {
      scope.dispatch = useDispatch();
    },
  },
});

<div data-wp-interactive data-wp-redux-provider>
  <div data-wp-text="state.counter"></div>
  <button
    data-wp-evaluate="evaluate.useDispatch"
    data-wp-on--click="actions.increment"
  >
    inc
  </button>
</div>

Stackblitz

3. Create a wp-use-dispatch directive to share the dispatch using the scope

The previous approach could be simplified using a data-wp-use-dispatch directive instead of the custom data-wp-evaluate.

import { useDispatch } from "react-redux";

directive("use-dispatch", ({ scope }) => {
  scope.current.dispatch = useDispatch();
});

store({
  actions: {
    increment: ({ scope }) => {
      scope.dispatch(increment());
    },
  },
});

<div data-wp-interactive data-wp-redux-provider>
  <div data-wp-text="state.counter"></div>
  <button data-wp-use-dispatch data-wp-on--click="actions.increment">
    inc
  </button>
</div>

Stackblitz

4. Use a wp-hook directive to populate hooks

Instead of a data-wp-use-dispatch directive, there could be a general data-wp-hook directive with another shared object called hooks instead of scope.

directive("hook", ({ directives: { hook }, context, evaluate, hooks }) => {
  const contextValue = useContext(context);
  Object.entries(hook).forEach(([name, path]) => {
    hooks.current[name] = evaluate(path, { context: contextValue });
  });
});

import { useDispatch } from "react-redux";
import { increment } from "./counter";

store({
  actions: {
    increment: ({ hooks }) => {
      hooks.dispatch(increment());
    },
  },
  hooks: {
    useDispatch: () => useDispatch(),
  },
});

<div data-wp-interactive data-wp-redux-provider>
  <div data-wp-text="state.counter"></div>
  <button
    data-wp-hook--dispatch="hooks.useDispatch"
    data-wp-on--click="actions.increment"
  >
    inc
  </button>
</div>

Stackblitz

5. Use wp-evaluate to add event handlers manually

Another option is to use wp-evaluate to run the hook and add the event handler manually.

<div data-wp-interactive data-wp-redux-provider>
  <div data-wp-text="state.counter"></div>
  <button data-wp-evaluate="actions.increment">inc</button>
</div>

import { useDispatch } from "react-redux";
import { increment } from "./counter";

store({
  actions: {
    increment: ({ element }) => {
      const dispatch = useDispatch();
      element.props.onclick = () => dispatch(increment()); // Add the event handler manually.
    },
  },
});

Stackblitz

6. Allow wp-on to run in the scope of the component, and use the returned function as event handler

The last option that came to my mind is to use a pattern similar to useEffect in wp-on, so you can share scope between the function that runs in the component and the event handler.

directive(
  "on-scope",
  ({ directives: { "on-scope": onWithScope }, element, evaluate, context }) => {
    const contextValue = useContext(context);
    Object.entries(onWithScope).forEach(([name, path]) => {
      const cb = evaluate(path, {
        context: contextValue,
        ref: element.ref.current,
      });
      element.props[`on${name}`] = (event) => {
        cb({ event });
      };
    });
  }
);

<div data-wp-interactive data-wp-redux-provider>
  <div data-wp-text="state.counter"></div>
  <button data-wp-on-scope--click="actions.increment">inc</button>
</div>

import { useDispatch } from "react-redux";
import { increment } from "./counter";

store({
  actions: {
    increment: () => {
      const dispatch = useDispatch(); // This runs in the scope of the component and can use hooks.
      return () => dispatch(increment()); // This is the event hander, which has access to `dispatch`.
    },
  },
});

Stackblitz

---

A similar issue will happen with accessing useSelector inside an event handler:

import { useDispatch, useSelector } from "react-redux";
import { increment } from "./counter";

store({
  state: {
    counter: () => useSelector((state) => state.counter.value),
  },
  actions: {
    increment: ({ state }) => {
      // Error! You can't run hooks (useSelector) in an event handler.
      const counter = state.counter();
      // Error! You can't run hooks in an event handler.
      const dispatch = useDispatch();
    },
  },
});

For that reason, I think the options that will allow any hook (5. and 6.) are superior.

Option 5:

import { useDispatch, useSelector } from "react-redux";
import { increment } from "./counter";

store({
  state: {
    counter: () => useSelector((state) => state.counter.value),
  },
  actions: {
    increment: ({ state, element }) => {
      const counter = state.counter(); // This is fine now.
      const dispatch = useDispatch();
      element.props.onclick = () => dispatch(increment());
    },
    },
  },
});

Option 6:

import { useDispatch, useSelector } from "react-redux";
import { increment } from "./counter";

store({
  state: {
    counter: () => useSelector((state) => state.counter.value),
  },
  actions: {
    increment: ({ state }) => {
      const counter = state.counter(); // This is fine now.
      const dispatch = useDispatch();
      return () => dispatch(increment());
    },
    },
  },
});

[nerrad]

Given the context of WP, I imagine consuming/integrating with wp.data would be preferable over directly utilizing React Redux but not until the size of wp.data can be reduced significantly (it currently has an unfortunate react-dom dependency which adds significant weight).