React/Redux无法保留搜索输入历史状态，如何在本地存储保存最近搜索？

嘿，我看你正尝试用本地存储保存最近搜索记录，但遇到了Redux状态没法持久化的问题对吧？先拆解下你代码里的问题，再给你一步步的解决方案：

首先，你的Reducer存在逻辑错误 #

看你Reducer里更新searches的部分，你用了...state来展开到数组里——这会把整个state对象（包含venues和searches）都塞到searches数组里，而不是之前的搜索历史数组。这会导致你的搜索历史结构完全混乱，自然没法正确保留状态。

修复这个错误很简单，只要把...state改成...state.searches：

const venueReducer = (state = initialState, action) => {
  switch (action.type) {
    case RECENT_SEARCHES:
      return {
        ...state,
        searches: [
          ...state.searches, // 这里应该取state里的searches数组，不是整个state
          { near: action.payload.location, query: action.payload.place },
        ],
      };
    default:
      return state;
  }
};

其次，需要加入本地存储的持久化逻辑 #

Redux的state默认是存在内存里的，页面一刷新就会丢失。所以我们需要在两个关键节点和localStorage交互：

1. 初始化state时，从localStorage读取之前保存的搜索历史
2. 更新搜索历史时，把新的state同步到localStorage

完整的Reducer修改方案 #

const initialState = {
  venues: [],
  // 初始化时优先读取localStorage里的记录，没有则用空数组
  searches: JSON.parse(localStorage.getItem('recentSearches')) || [],
};

const venueReducer = (state = initialState, action) => {
  switch (action.type) {
    case RECENT_SEARCHES:
      // 生成更新后的搜索历史数组
      const updatedSearches = [
        ...state.searches,
        { near: action.payload.location, query: action.payload.place },
      ];
      // 同步到localStorage
      localStorage.setItem('recentSearches', JSON.stringify(updatedSearches));
      return {
        ...state,
        searches: updatedSearches,
      };
    // 保留你其他的case逻辑，比如FETCH_VENUE_REQUESTED等
    default:
      return state;
  }
};

可选优化：避免重复的搜索记录 #

如果不想保存完全重复的搜索条目，可以在添加前先做去重处理，比如把新搜索放在最前面，同时过滤掉相同的历史：

case RECENT_SEARCHES:
  const newSearch = { near: action.payload.location, query: action.payload.place };
  // 过滤掉和新搜索完全一致的条目
  const uniqueSearches = state.searches.filter(search => 
    search.near !== newSearch.near || search.query !== newSearch.query
  );
  // 新搜索放在数组头部，保证最新的在最前面
  const updatedSearches = [newSearch, ...uniqueSearches];
  localStorage.setItem('recentSearches', JSON.stringify(updatedSearches));
  return {
    ...state,
    searches: updatedSearches,
  };

最后检查你的Action是否正确传递Payload #

确保fetchVenues里的RECENT_SEARCHES action正确传递了location和place：

export const fetchVenues = (place, location) => dispatch => {
  dispatch({ type: FETCH_VENUE_REQUESTED });
  // 确保payload包含location和place两个字段
  dispatch({ 
    type: RECENT_SEARCHES, 
    payload: { location, place } 
  });
  // 这里继续你的API请求逻辑
};

这样修改后，每次添加新搜索时，Redux会更新state并同步到localStorage，页面刷新时会自动从localStorage读取之前的历史记录，就能完美保留搜索输入的状态啦～

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