Troubleshooting Local Storage Issues: Transitioning from Redis & State Management Discussion

In this meeting, State Changers focused largely on troubleshooting a piece of code for an interactive webpage feature. The main issue discussed was the inability of a page to maintain user-specific changes (color indicators for selected categories, etc.) after refreshing the page. The issues were primarily connected to local storage and state management within the Webflow platform used for developing the web application.

The meeting began with a demonstration of the problem and exploration of the code. The State Changer leading the discussion noted that their previous use of Redis for local storage was no longer adequate, having shifted more of their work to local storage directly on the client's side. In particular, they highlighted how after selecting 'over' or 'under' on the application, the page did not keep the correct components highlighted after a refresh - indicating that their changes to local storage were not being properly maintained. The workaround proposed involved restructuring some of the logic of the state management. An issue was identified where both 'over' and 'under' options were treated as true in a complex arrangement of event handlers. To avoid this, the State Changer was advised to stay away from an event reaction track approach and consider incorporating a more solidified state management strategy or tool. This would allow the web application to keep track of its state and make necessary updates when events occur, keeping the page synchronized with its intended display. Suggestions on how to approach the problem included: - Choosing an approach that places more importance on state management. - Possibly restructuring towards a more 'no code' strategy that abstracts some of the complexity. The participant noted that the issue only occurs on one page within their application and shared how they planned to apply the knowledge gained from this solution to another application styled with a different language, Flutter, hinting at the versatility of proper state management. At the end of the meeting, a temporary fix to the problem was implemented by adjusting how the page references state. The fix involved determining the logic of the 'over' and 'under' variables and configuring them to maintain the state as per the user's changes. However, the group agreed on the importance of considering a more scalable solution that offers coherent and efficient state management for longer-term sustainability and ease of expansion. Overall, this meeting is useful for anyone dealing with interactive features on a webpage, especially those working on managing user selections or dealing with persistent state management issues across site refreshes and revisits. It offers an in-depth discussion on local storage, state management, the usage of

(Source: Office Hours 5/22 )

State Change Members Can View The Video Here

View This Video Now

Join State Change Risk-Free