How to dispatch an action from redux devtools

[josemahs]

Hello,

I am using the redux devtools extension for my browser and to make my flows more efficient, and i need to figure out how can the dispatch textarea works with zustand.

There is a simplification of my store:

import { create } from "zustand";
import { devtools } from "zustand/middleware";

const INITIAL_SCOPED_STATE: ScopeState = {
  selectedCandidates: [],
};

const SCOPES = ["test1", "test2"] as const;

type ICandidateSelected = {
  id: number;
  name: string;
};

export type Scope = (typeof SCOPES)[number];

export interface ScopeState {
  selectedCandidates: ICandidateSelected[];
}

type State = Record<Scope, ScopeState>;

type Actions = {
  addSelectedCandidate: (candidate: ICandidateSelected, scope: Scope) => void;
  resetStore: () => void;
};

const initialState = SCOPES.reduce(
  (acc, scope) => ({ ...acc, [scope]: { ...INITIAL_SCOPED_STATE } }),
  {}
) as State;

export const useSelectedCandidatesStore = create<State & Actions>()(
  devtools(
    (set) => ({
      ...initialState,
      addSelectedCandidate: (candidate, scope) =>
        set(
          (state) => ({
            ...state,
            [scope]: {
              ...state[scope],
              selectedCandidates: [
                ...state[scope].selectedCandidates,
                candidate,
              ],
            },
          }),
          false,
          { type: "addSelectedCandidate", payload: { candidate, scope } }
        ),
      resetStore: () => set(initialState, false, { type: "resetStore" }),
    }),
    { name: "Selected Candidates Store" }
  )
);

After some debugging i want to execute an action manually with the devtools dispatcher. What i am doing is putting the action object in the textarea and click the dispatch button and zustand devtools middleware throws the next error...

[zustand devtools middleware] Could not parse the received json SyntaxError: Expected property name or '}' in JSON at position 4 (line 2 column 3)

The JSON i am trying to dispatch:

{
  "type": "addSelectedCandidate",
  "payload": {
    "candidate": {
      "id": 1,
      "name": "test"
    },
    "scope": "candidates"
  }
}

StackBlitz example

Anyone could provide me some information about this?

[msanchezdev]

I'm working on a fix for this, look forward to it

[dai-shi]

I don't think sending an action payload is supported. It feels generally impossible as Zustand actions are conventions unlike Redux actions. But, under some constraints, it should be possible. If anyone is interested, feel free to dig into it further.

[dai-shi]

It would does

Cool. Let's have a test case for it.

[msanchezdev]

Hmm, I am not getting that redirect, It's still in https://github.com/zalmoxisus/remotedev-utils/

Oh, didnt see that, but here you go.

https://github.com/reduxjs/redux-devtools/blob/8f5cf1b5bca26009ea1bc29741d07166a79231a9/packages/redux-devtools-utils/src/index.ts#L66

[dai-shi]

One tricky thing is that we need to make redux-devtools-utils a peer dependency, and users have to install it by themselves.

[msanchezdev]

Yeah, I thought it was already included, but the code used from that package is simple so I thought about just inlining them in the devtools middleware. That way we don't need to add extra dependencies, and can even make improvements to it as I found an issue in how the original package detects param names

[dai-shi]

Sounds good.

[dai-shi]

What's a bit confusing is that the examples shown by @josemahs and @mahendradambe look different:

{
  "type": "addSelectedCandidate",
  "payload": {
    "candidate": {
      "id": 1,
      "name": "test"
    },
    "scope": "candidates"
  }
}

{
  type: "ACTION",
  payload: {
    args: ["123"],
    name: "addTab",
    rest: "[]",
    selected: 0
  },
  state: undefined,
  id: "1",
  source: "@devtools-extension"
}

It looks like the latter is correct?
https://github.com/reduxjs/redux-devtools/blob/main/extension/src/contentScript/index.ts#L66-L71
But, it makes me feel that we need someone with decent knowledge about it.

[msanchezdev]

The second one is the right format accepted by the Devtools, I think the first one is how @josemahs wanted it to look like.

[dai-shi]

okay.