#Update state based on action result?

2 messages · Page 1 of 1 (latest)

radiant cedar
#

I have the following action:

export const useReply = action$(() => {
    return {
      success: true,
      reply: "¡Hola!",
    };
  }
);

And in my component I have a conversation signal defined like this:

export default component$(() => {
  const action = useReply();

  const conversation = useSignal([]);

  if (action.value && !action.isRunning) {
    conversation.value = [
      ...conversation.value,
      { sender: "user", message: action.formData?.get("question") },
      { sender: "backend", message: action.value.reply },
    ];
  }

I'm receiving a "State mutation inside render function" warning.

I'm unsure how inside a useBrowserVisibleTask callback how can I track that an action was executed so that I can update my local state from there. Any ideas?

radiant cedar
#

Bumping this just in case anyone knows something