重复操作时更新状态的方法？LocalStorage状态更新替代方案咨询

Hey there! Let's tackle your two questions and fix that state update issue with LocalStorage you're facing.

1. Methods to Update State in Repeated Operation Scenarios #

When dealing with repeated actions (like loading data from LocalStorage multiple times), the key is to follow immutable state updates (a core rule in Redux-like state management) and pick the right strategy based on your needs:

• Full State Replacement: If you need your state to perfectly mirror an external data source (like LocalStorage), replace the existing state entirely with the fresh dataset. This avoids duplicates and ensures you always have the latest data.
• Deduplicated Incremental Update: If you want to keep existing state but only add/update new or changed items, use array methods like map and findIndex with a unique identifier (e.g., a contact's id). Update matching entries and add new ones without duplicates.
• Conditional Execution: Prevent redundant updates by adding checks in your reducer. For example, skip loading data if the state already contains the data you need, so repeated actions don't trigger unnecessary changes.

2. Fixing the LocalStorage Data Update (Instead of Appending) #

Looking at your current code, the issue is that you're mutating the original state array with push (which breaks immutability rules) and returning a copy of that mutated state—this causes repeated appends every time the action runs. Here are two reliable solutions:

Solution 1: Replace State with Fresh LocalStorage Data #

This is the simplest fix if you want your state to always reflect the latest LocalStorage data:

export const contactList = [];
export function getContacts(state = contactList, action) {
  switch (action.type) {
    case 'LOAD_CONTACTS_FROM_STORAGE':
      const freshContacts = [];
      // Safely iterate through all LocalStorage keys
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        // Only process keys matching your contact naming pattern
        if (key.startsWith('contact')) {
          freshContacts.push(JSON.parse(localStorage.getItem(key)));
        }
      }
      // Return the new array to fully replace the existing state
      return freshContacts;
    default:
      return state;
  }
}

Why this works:

• We never mutate the original state array—we build a completely new array from scratch using LocalStorage data.
• Using localStorage.key(i) makes the code more robust (no hardcoded assumption that keys are exactly contact0, contact1, etc.).
• Returning the new array ensures your state gets fully updated with the latest LocalStorage data every time the action triggers.

Solution 2: Merge and Deduplicate Existing State #

If you need to keep existing state but avoid duplicate or outdated contacts, use a unique identifier to update or add entries:

export const contactList = [];
export function getContacts(state = contactList, action) {
  switch (action.type) {
    case 'LOAD_CONTACTS_FROM_STORAGE':
      const storageContacts = [];
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key.startsWith('contact')) {
          storageContacts.push(JSON.parse(localStorage.getItem(key)));
        }
      }
      // Merge storage data with existing state, updating duplicates
      const mergedState = [...state];
      storageContacts.forEach(contact => {
        const existingIndex = mergedState.findIndex(c => c.id === contact.id);
        if (existingIndex !== -1) {
          // Update the existing contact with fresh data
          mergedState[existingIndex] = contact;
        } else {
          // Add new contact if it doesn't exist
          mergedState.push(contact);
        }
      });
      return mergedState;
    default:
      return state;
  }
}

Quick Immutability Note #

Your original code had this line:

let newState = [];
newState = state;

This doesn't create a new array—it just points newState to the original state reference. Always create new arrays/objects when updating state to ensure your state management library (like Redux) detects the change correctly.

内容的提问来源于stack exchange，提问作者Olan Aodhan