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.

Computed value updating one state change behind action

See original GitHub issue

Currently, I have an array of strings called currentCycles, an Action used to set this array called setCurrentCycles, and a computed value that should update every time the setCurrentCycles action is called. The computed value uses the currentCycles value to retrieve the correct data. However, the value of currentCycles always seems to be one update behind the value it should be set to after called setCurrentCycles.

I am using redux-persist, typescript, as well as easy-peasy version 3.0.2 if that helps with the problem as well. It’s worth noting that if I make a change to the store state later on, the computed value gets re-computed and the value of filteredTokens is correct. Also, if I do a direct request to currentCycles through useStoreState, the values are correct. Here is the code I’m using as well as some console logs that hopefully help with the debugging process:

currentCycles: [],
setCurrentCycles: action((state, payload) => {
  // Action: should print out an array of cycleIDs, which are strings
  console.log('Action: ', JSON.stringify(payload));

  state.currentCycles = payload;
}),
filteredTokens: computed(
  [state => state.currentCycles, state => state.token.tokens, state => state.workflow.currentWorkflowID],
  (currentCycles, tokens, currentWorkflowId) => {
    // Computed: Should print out the same cycleIDs from the action, but rather are printing the cycleID from a previous update
    console.log('Computed: ', JSON.stringify(currentCycles));

    return tokens.filter(token => token.workflowId === currentWorkflowId && currentCycles.includes(token.cycleId));
  }
)

Current Values: Start:

Computed:  ["ihoisdg293jpinvzlknalksf","newcycle"]

Remove ID “ihoisdg293jpinvzlknalksf”:

Action:  ["newcycle"]
Computed:  ["ihoisdg293jpinvzlknalksf","newcycle"]

Remove ID “newcycle”:

Action:  []
Computed:  ["newcycle"]

Expected Values: Start:

Computed:  ["ihoisdg293jpinvzlknalksf","newcycle"]

Remove ID “ihoisdg293jpinvzlknalksf”:

Action:  ["newcycle"]
Computed:  ["newcycle"]

Remove ID “newcycle”:

Action:  []
Computed:  []

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
McMainsLiamcommented, Oct 31, 2019

Sounds great on the timeline! I sent a little ‘coffee’ money your way. The amount of trouble easy-peasy has saved me was easily worth it. I hope it helps! Thanks @ctrlplusb!

1reaction
McMainsLiamcommented, Oct 31, 2019

Hey, it’s great to hear that’s in progress already! I’ll make a new branch and give it a shot a little later today. I’ll post the results as soon as I have them. Thanks for your hard work on the library! I can’t recommend it to enough people!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Redux how to update computed state - Stack Overflow
If the Redux state tree is changed in a way that causes the value of an input-selector to change, the selector will call...
Read more >
Computed property not updating with state change · Issue #699
I have a store with a state: const state = { currentAircraft: null, //[...] ...
Read more >
State - Vuex
Whenever store.state.count changes, it will cause the computed property to re-evaluate, and trigger associated DOM updates. However, this ...
Read more >
Safely Updating The View State - The SwiftUI Lab
If you find yourself trying to modify the state of view while its body is computed, here you can learn what are the...
Read more >
Common Mistake with Synchronizing State in React -- newline
"I set the state, why didn't I see it change?"# ... I've had multiple colleagues run into a bug like the following: when...
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