Redux能否为同一React应用的不同标签页创建独立store避免数据冲突

你遇到的状态覆盖问题核心原因大概率是将Redux的订单详情状态持久化到了localStorage这类同域标签页共享的存储介质中，正常运行在内存里的Redux store在不同浏览器标签页中是天然隔离的，不会互相影响。

• 如果你用了redux-persist这类持久化库，直接把订单详情对应的reducer从持久化配置中移除，仅将状态存在当前标签页内存中即可解决冲突
• 如果你确实需要持久化订单详情数据，可以按标签页维度加存储前缀：
  1. 每个标签页初始化时生成唯一随机ID，存在标签页独有的sessionStorage中，刷新页面也不会丢失
  2. 持久化Redux状态时，给所有存储key加上当前标签页的ID前缀，比如tab_8x7y6z_orderDetail，不同标签页的存储key完全不冲突
  3. 如果之前有监听storage事件同步跨标签页状态的逻辑，匹配时仅处理带当前标签页前缀的key即可

如果确实需要完全隔离的store实例，可按以下步骤实现：

1. 改造store创建逻辑，把原来的单例store导出改为工厂函数，每次调用生成全新的store实例：

// 废弃原来的单例写法
// export const store = configureStore({ reducer: rootReducer })

// 改为工厂函数
export const createAppStore = () => {
  return configureStore({
    reducer: rootReducer,
    // 原有中间件、enhancer配置保持不变
  })
}

2. 调整入口Provider逻辑，每个标签页初始化应用时，调用工厂函数生成独立store传给Provider：

// 项目入口文件 src/index.js
import { createAppStore } from './store'
import { Provider } from 'react-redux'

const store = createAppStore()

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
)

3. 移除跨标签页状态同步逻辑，删掉之前监听storage事件同步不同标签页Redux状态的代码，避免独立store之间互相同步数据
4. 可选持久化配置：如果需要持久化store，按方案1的标签页前缀规则配置redux-persist的存储key即可

如果你是用<Link target="_blank"/>打开的同域订单详情路由，以上配置完全生效，每个标签页的store从根实例开始就是完全独立的，不会出现状态覆盖问题。

如果订单详情页逻辑比较简单，可以不用把订单详情存在全局Redux store中，直接在详情页内通过订单ID调用接口获取数据，用组件内部状态（useState/useReducer）或者React Query这类请求状态库存储数据，天然和其他标签页隔离，从根源避免状态冲突问题。

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