IonModal更新Redux数据后Home页面未同步刷新问题咨询

问题原因&修复方案 #

1. 优先移除Home组件冗余的本地状态 #

你当前的Home组件里完全没必要把useSelector取到的quotes再转存到本地data状态，useSelector本身就会监听Redux store的对应状态变化，自动触发组件重渲染，直接用取到的quotes渲染列表即可，修改后的Home代码如下：

export default function Home(): ReactElement {
  // 直接取Redux中的quotes即可，无需额外转存本地state
  const quotes = useSelector((state: any) => state.quotes);
  return (
    <IonPage>
      <IonContent fullscreen>
        <Modal />
        {quotes.map((q: any) => {
          return <p key={q?._id}>{q?.content}</p>;
        })}
      </IonContent>
    </IonPage>
  );
}

2. 检查Redux reducer的更新逻辑是否符合不可变要求 #

如果改完上面的代码还是不更新，大概率是你写的addQuote对应的reducer逻辑直接修改了原数组，没有返回新的数组引用，Redux是通过浅对比引用判断是否要更新状态的，错误和正确的写法示例如下：

• ❌ 错误写法（直接修改原数组，引用不变不会触发更新）

// quotes reducer错误示例
function quotesReducer(state = [], action) {
  switch(action.type) {
    case 'addQuote':
      state.push(action.payload);
      return state;
  }
}

• ✅ 正确写法（返回新数组，引用变化触发更新）

function quotesReducer(state = [], action) {
  switch(action.type) {
    case 'addQuote':
      // 返回全新的数组
      return [...state, action.payload];
  }
}

3. 兼容Home组件确实未挂载的极端场景 #

如果你用了Ionic的页面缓存机制（比如IonRouterOutlet的keepAlive特性），页面切走后确实会卸载/缓存，也不需要额外处理：useSelector会在组件每次挂载的时候自动取Redux store的最新值，挂载完成后只要store变化也会自动同步，不需要额外写触发逻辑。

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