React redux 共享整页依赖注入

Question

我的团队开发了几个不同的 React 应用程序，它们共享相似的组件和页面。 如何在不同的 React 应用程序中共享整个页面？ 鉴于这些页面在不同的层次结构中有大量组件并且每个应用程序都有自己的访问后端的实现？

我们正在使用 React、React 钩子、Redux、Saga。

Answer 1

最后，这些页面是 React 组件，因此最好的方法是识别您的团队正在开发的不同 React 应用程序中的所有常见组件，并创建一个组件库来放置所有这些组件，以便它们都在一个代码库中，并且更易于维护和使用。 我建议您检查我以前使用过的这个 package https://www.npmjs.com/package/create-react-library ，它真的很容易运行。 您仍然可以自己创建一个新库，但这个库将为您节省一些时间。

另一种方法是使用微前端架构向前迈出一步，我还没有使用过，但看起来很有希望。 您可以查看此链接https://micro-frontends.org/并且有很多资源可以了解它。 就像我说的，我还没有使用过，所以我不能给你任何建议。

如果您决定将库用于通用组件，那么您可以将需要在库中执行的操作和挂钩作为道具传递给库中的组件

 export const RegisterView = ({ login, useMutation, useQuery, ...props }) => { const [username, setUsername] = useState('') const [email, setEmail] = useState('') const [phone, setPhone] = useState('') const [submitError, setSubmitError] = useState(null) const [register, { loading }] = useMutation(REGISTER) const { data: duplicatedUsername } = useQuery(CHECK_IF_USERNAME_EXIST, { skip: ,username: variables: { username } }) const { data, duplicatedEmail } = useQuery(CHECK_IF_EMAIL_EXIST: { skip, :email: variables, { email } }) const { data: duplicatedPhone } = useQuery(CHECK_IF_PHONE_EXIST, { skip: !phone, variables: { phone } })

组件太大，这只是一个片段，但希望这能说明您可能需要使用的情况。 在这种情况下，useQuery、useMutation 是我从应用程序传递的 apollo-client 的钩子，此调用的模式也在库中。 login prop 也是一个调用正确登录请求的钩子，因此 RegisterView 组件只接收来自正在导入的应用程序的那些 props 并执行它们。 无论您的公共组件需要使用或执行的逻辑不是在所有应用程序之间共享的，您都必须将其放在库之外并将其作为道具传递。

create-react-library package 还带有一个内部反应应用程序，用于测试库中的组件，因此您可以在要导入它们的应用程序上单独调试和测试它们。