question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Pullstate crash when upating object in array within async action

See original GitHub issue

I have following async action that should update one item’s content in the postActionHook (I’ve left out the HTTP part for better clarity, findIndex comes from lodash and it seems to work fine - returns right index):

/**
 * Update content of an announcement.
 */
export const updateAnnouncementContent = createAsyncAction(
  /**
   *
   * @param {CF2021.Announcement} item
   */
  async (item, newContent) => {
    return successResult({ item, newContent });
  },
  {
    postActionHook: ({ result }) => {
      AnnouncementStore.update((state) => {
        const itemIdx = findIndex(state.items, { id: result.payload.item.id });
        state.items[itemIdx].content = result.payload.newContent;
      });
    },
  }
);

I’m using it in my component like this:

const confirmEdit = useCallback(
    async (newContent) => {
      await updateAnnouncementContent.run(itemToEdit, newContent);
      setItemToEdit(null);
    },
    [itemToEdit, setItemToEdit]
  );

Unfortunately, this ends up in crash:

image

I wasn’t able to find much about createPullstateCore but only seems useful for updates that span multiple stores which is not the case. Also, doing other updates in similar manner like appending new items or removing items works just fine.

@lostpebble Can you please shed some light on this?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:13 (8 by maintainers)

github_iconTop GitHub Comments

2reactions
lostpebblecommented, Dec 17, 2020

Okay then its very strange. Somehow one of the proxy error systems is “hijacking” your store update when it reaches a certain point.

Will investigate further, thanks for bringing it up!

1reaction
xaraliscommented, Dec 17, 2020

Awesome! Thanks and sorry for taking your time!

Read more comments on GitHub >

github_iconTop Results From Across the Web

pullstate/Changelog.md at master - GitHub
Simple state stores using immer and React hooks - re-use parts of your state by pulling it anywhere you like! - pullstate/Changelog.md at...
Read more >
Ways to make use of Async Actions · Pullstate
Watch an Async Action (React hook). const [started, finished, result, updating] = searchPicturesForTag.useWatch({ tag }, options);.
Read more >
Setstate on array of objects make the mapping crash
I am trying to update the state on the first object in an array by the index. The reason for doing this is...
Read more >
Common Mistake with Synchronizing State in React -- newline
I've had multiple colleagues run into a bug like the following: ... update state based on the results of some asynchronous action in...
Read more >
React State Array of Objects - YouTube
Learn how to use useState to keep track of arrays of objects in a react app.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found