在NX/npm Monorepo中共享Redux状态至共享UI组件的最佳实践

直接导入主应用Redux Store的问题 #

直接从react-app导入redux-store.js完全不可行，会带来这些麻烦：

• 编译共享UI库时会报错，因为共享库的编译上下文不包含主应用的代码，找不到对应的模块。
• 把共享UI库和特定主应用强绑定，违反了复用原则——以后其他应用想用这个组件，就得被迫依赖当前主应用的Redux配置。
• 破坏了Monorepo的代码分层逻辑，共享库本该是独立的基础依赖，结果变成了主应用的附属品。

推荐的最佳实践方案 #

1. 依赖注入：通过props传递状态与回调（最推荐） #

让共享UI组件完全脱离Redux依赖，所需的状态和操作都通过props从外部传入。

示例代码：

// shared-ui/component-that-use-redux.jsx
export default function ComponentThatUseRedux({ userName, onUpdateUserName }) {
  return (
    <div>
      <p>当前用户：{userName}</p>
      <button onClick={() => onUpdateUserName('新名字')}>修改名字</button>
    </div>
  );
}

主应用中使用时，从Redux取数据并传入组件：

// react-app/pages/some-page.jsx
import { useSelector, useDispatch } from 'react-redux';
import ComponentThatUseRedux from '@nx-project/shared-ui/component-that-use-redux';
import { updateUserName } from './redux-store.js';

export default function SomePage() {
  const userName = useSelector(state => state.user.name);
  const dispatch = useDispatch();
  const onUpdateUserName = (name) => dispatch(updateUserName(name));
  
  return <ComponentThatUseRedux userName={userName} onUpdateUserName={onUpdateUserName} />;
}

优点：组件彻底解耦，能在任何React项目中复用，完全不依赖Redux。

2. 抽离Redux核心逻辑到独立共享库 #

如果组件确实需要直接用Redux Hooks，把Redux的slice、自定义hooks、类型定义等核心逻辑抽成一个独立的shared-redux库，让主应用和共享UI库都依赖这个库。

调整后的目录结构：

Nx-project/
├── apps/
│   └── react-app/
│       └── redux-store.js // 导入shared-redux的slice创建store
└── libs/
    ├── shared-ui/
    │   └── component-that-use-redux // 导入shared-redux的自定义hooks
    └── shared-redux/
        ├── user.slice.js
        └── hooks.js // 封装好的Redux hooks

示例代码：

// shared-redux/hooks.js
import { useSelector, useDispatch } from 'react-redux';
import { updateUserName } from './user.slice';

export const useUser = () => {
  const userName = useSelector(state => state.user.name);
  const dispatch = useDispatch();
  return {
    userName,
    updateUserName: (name) => dispatch(updateUserName(name))
  };
};

共享UI组件直接用这个共享库的hooks：

// shared-ui/component-that-use-redux.jsx
import { useUser } from '@nx-project/shared-redux/hooks';

export default function ComponentThatUseRedux() {
  const { userName, updateUserName } = useUser();
  return (
    <div>
      <p>当前用户：{userName}</p>
      <button onClick={() => updateUserName('新名字')}>修改名字</button>
    </div>
  );
}

主应用创建store时导入共享库的slice：

// react-app/redux-store.js
import { configureStore } from '@reduxjs/toolkit';
import { userSlice } from '@nx-project/shared-redux/user.slice';

export const store = configureStore({
  reducer: {
    user: userSlice.reducer
  }
});

优点：既满足了组件直接用Redux的需求，又避免了和特定主应用绑定，符合Monorepo的代码复用逻辑。

3. React Context传递Store（不推荐） #

如果不想抽新库，也可以用Context把Redux的useSelector和useDispatch传递给共享组件，但这种方式会增加复杂度，而且不如前两种方案清晰，只适合临时过渡场景。

总结 #

• 绝对不要直接从主应用导入Redux Store，编译报错和强耦合的问题会让你头疼不已。
• 优先选props传递状态/回调，让组件彻底独立。
• 如果组件必须依赖Redux逻辑，就抽离Redux核心到共享库，保持代码的复用性和低耦合。

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