React应用中能否同时集成Recoiljs与Redux进行状态管理

完全可以，二者不存在底层技术冲突，完全可以在已完成Redux搭建的项目中按需引入Recoil，不需要重构存量Redux代码。

共存可行性原理 #

• 两个状态库的运行机制完全独立：Redux依赖自身的单一Store、Provider上下文传递状态，基于订阅机制触发组件更新；Recoil依赖独立的RecoilRoot节点维护自身的状态图，通过atom/selector粒度触发更新，二者的状态存储、更新链路、订阅逻辑完全隔离，不会互相干扰。
• 二者的React接入层都是基于Context实现的独立作用域，只要按要求包裹对应根节点，就不会出现上下文冲突的问题。

类Excel场景的落地建议 #

针对当前开发类Excel复杂应用的场景，不需要把存量Redux逻辑全量迁移，只需要做好状态边界划分即可：

• 存量已完成的Redux逻辑全部保留：跨全应用共享的用户信息、权限、全局配置、接口缓存这类更新频率低、需要统一追踪流转的状态，继续放在Redux中维护，避免无意义的重构工作量。
• 类Excel模块的复杂状态交给Recoil实现：针对单元格选中态、临时编辑值、公式派生计算、多选区联动、撤销重做栈这类细粒度、高频更新、依赖关系复杂的状态，用Recoil的atom拆分最小状态单元、selector自动处理派生状态计算，相比Redux编写大量action、reducer的开发成本低很多，同时细粒度订阅的特性能避免Redux全局状态变更带来的大量无效重渲染，更匹配表格类场景的性能要求。

接入注意事项 #

1. 根节点嵌套无强制顺序要求，只需要保证用到Recoil状态的组件被RecoilRoot包裹即可，基础配置示例如下：

import { Provider } from 'react-redux';
import { RecoilRoot } from 'recoil';
import store from './redux/store';
import App from './App';

export default function Root() {
  return (
    <Provider store={store}>
      <RecoilRoot>
        <App />
      </RecoilRoot>
    </Provider>
  );
}

2. 避免同一份状态在两个库中重复托管，提前划清边界即可杜绝状态不一致问题。
3. 如果需要跨库读取/同步状态，直接在组件层做桥接即可：在组件中同时通过useSelector读取Redux状态、通过useRecoilValue/useRecoilState读取Recoil状态，在useEffect等副作用逻辑中处理双向同步，不需要修改两个库的底层源码。

生产环境中根据不同场景的状态特性搭配使用不同状态管理库是非常常见的实践，不需要强行要求全项目只使用单一状态方案，适配场景的选型比统一技术栈的教条要求收益更高。

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