Troublesome update: Migrating XState's Reddit example from Vue 2 to Vue 3

Recently, I delved into the XState documentation and decided to explore the Reddit sample provided in the official guide. You can find it here:

As I attempted to upgrade the sample implementation to Vue 3 following the work of Chris Hannaby, I encountered some difficulties.

Upon running the app, after selecting an item from the list, the component appeared to be stuck at "Loading", despite the subreddit interpreter's state being correctly set to 'loaded' as observed in Vue Dev Tools.

https://i.sstatic.net/aTSof.png

Interestingly, if you choose a different item in the list and then return to the previous one, it functions properly and loads the list as expected.

Here is Chris's codesandbox showcasing the working example in Vue 2:
https://codesandbox.io/s/xstate-vue-reddit-example-with-actors-uvu14

And here is my attempt at forking it in Vue 3, unfortunately with issues:
https://codesandbox.io/s/xstate-vue-reddit-example-with-actors-forked-1pm0mp

Being relatively new to both Vue and XState, any guidance or assistance would be much appreciated.

javascriptvue.jsvuejs2xstate

Answer №1

After coming across a similar bug to mine, I decided to try the suggestion provided here:
https://github.com/statelyai/xstate/issues/3169

To solve the issue, I made modifications to the implementation by adding the call to toRef, as shown below

const { state, send } = useActor(toRef(props, "service"))

And voila, it worked like a charm!
https://codesandbox.io/s/xstate-vue-3-reddit-example-with-actors-working-g9ywb2

I would love to gain more insights into why this solution worked. Any explanations would be greatly appreciated.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using index value as parameter in append function within angular js

I attempted to develop a chat box in Angular, and although I was able to create it, something feels wrong. When I click on the members, it displays a different member than expected. Could someone please review my code? Here is the link to the Plunker: &l ...

javascriptangularjsangularjs-directive

Is it possible to retrieve a specific property from an object in JSON format using Javascript?

As a beginner in JavaScript, I've been diving into the world of objects and trying to grasp how they function. var data = JSON.stringify({name: "Y", age: 1990}); console.log(data); // → {"name":"Y","age":1990} Out of sheer curiosity, I decided to ...

javascriptjson

Waiting for an Element to Become Visible in Selenium-Webdriver Using Javascript

When using selenium-webdriver (api docs here), how can you ensure that an element is visible before proceeding? Within a set of custom testing helpers, there are two functions provided. The first function successfully waits for an element to exist, howeve ...

javascriptseleniumselenium-webdriverxpathwebdriver

Here's a guide on executing both GET and POST requests using a single form

Currently, I am developing a web application which involves using a GET request to display checkboxes in a form. The selected data from the checkboxes needs to be sent back to the server using a POST request. However, I'm facing an issue with performi ...

javascriptjqueryajaxcherrypy

Displaying time text in input element due to browser bug

I am faced with a perplexing puzzle that has left me scratching my head. Here are two seemingly identical pieces of javascript code, but one behaves unexpectedly (take note of the Console.Log): Updates the UI once, then abruptly stops updating: http://js ...

javascriptjquery

Is it possible for the controller of a modal window to have access to functions within the parent controller

If you were to launch a modal window using $modal.open from an angular directive, would the modal window be able to access functions defined within the parent directive? Below is the code for the directive controller: function parentFunction() { re ...

javascriptangularjsangular-bootstrap

By pressing the "showMore" button, the page dynamically pulls in a json list from a file

Currently, my focus is on a dropwizard-Java project. My task involves retrieving and showcasing the first 10 items from a json list in a mustache view. If the user clicks on the "show more" link, I should retrieve the next 10 elements from the list and d ...

javascriptjavajqueryjsonmustache

Can the Automator tool capture a specific section of a website in a screenshot?

Is it possible to use automator to navigate through a store's website category and open each product in a new tab? Alternatively, is there a software that can extract all the product URLs from a specific website? For example, this website has 14 prod ...

javascriptpythonseleniumscreenshotautomator

The verification of form is not done using an if statement

There are two forms in my code named formA and comments that I need to submit via AJAX. However, the current if and else conditions do not correctly identify the form and always trigger the alert message hello3. Here is the JavaScript function: function ...

javascriptjqueryajax

Transmitting an event from the parent to the child

I have three components named AppRoot.vue, AppToolbar.vue, and AppDrawer.vue My challenge is to toggle the isDrawerOpen variable in the AppDrawer.vue component when a button in AppToolbar.vue is clicked. These components are declared within AppRoot.vue. ...

vue.js

Having trouble with loading JavaScript during ng build --prod process

The JavaScript file I'm using for multiple emails (multiple_emails.js plugin) works well with ng serve. Here is my code: (function( $ ){ $.fn.multiple_emails = function(options) { // Default options var defaults = { ...

javascripttypescript

Error message saying 'Callback has already been invoked' returned by an async waterfall function

I'm facing an error that I understand the reason for, but I'm unsure how to resolve it. Here's a breakdown of my initial function: Essentially, I am making a get request for all URLs stored in the database and then, for each URL response, I ...

javascriptnode.jsasync.js

Flash messages can be hit or miss in their display. Sometimes they show up, other

I have integrated the spatie/laravel-flash package to display flash messages in my Laravel application. The flash messages work well with simple HTML forms, but I am facing an issue when using Vue.js templates. Sometimes the flash message does not show up ...

laravelvue.jsflash-message

Efficiently converting arrays to strings in JavaScript using mapping techniques

My goal is to retrieve data through AJAX without formatting it as JSON, so I took the initiative to encode it myself. The data I am working with consists of client records: where the pound sign (#) separates the client records, the pipe sign (|) separates ...

javascriptajaxarraysjson

How can you receive a file through AJAX response?

I have a standard Ajax function that I regularly use to call a specific function within my node.js server. This particular function is responsible for retrieving a file (usually in xls format) from the server and streaming it back to the client. Below is ...

javascriptjqueryajaxnode.js

Picking a variety of elements and determining their heights using the height

I'm curious why this jQuery code isn't working as expected: hdr = $('.header-wrapper, #top-bar, #new-showroom-header').height(); My intention is to retrieve the heights of multiple elements and store them in a variable. I assumed that ...

javascriptjquery

I am looking to remove the target attribute from an anchor tag if it does not have a value assigned

To ensure W3C validation, I must remove the target attribute from all anchors where the target value is null. Here is the code snippet inside the body: <div> <a href="#" target="">home empty</a> <a href="#" target="blank">home&l ...

javascriptjqueryhtml

Prevent the hover() effect from affecting all div elements at once

I am aiming to achieve a function where hovering over a div with the "rectangle" class will display another div with the "description" class. Initially, the description div will have a display value of "none", but upon hovering, it should become visible. ...

javascripthtmljquerycss

Steps to store chosen option from dropdown list into a database's table

I am currently populating a dropdown list in my PHP file by fetching data from a database. Here is the code snippet: <script type="text/JavaScript"> //get a reference to the select element var $select = $('#bananas'); //reques ...

javascriptphpajax

Refreshing and reloading within the same jQuery function

My PHP application involves the use of 2 PHP files. chart.php - This page includes a Google chart. <div id="chart_div" style="height:100%;width:100%"> </div> <script type="text/javascript"> google.charts.load('current', ...

javascriptphpjquerygoogle-visualizationreload