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?