Question

我正在尝试更新我的React应用程序以使用MVVM作为架构模式。我最初是用Hooks和Redux构建的。我发现我找到的每个资源都在MVVM中使用类。此外，我找不到使用Redux来管理状态的任何内容。我一直看到MobX出现了，但是我已经尝试使用Redux了，因为我已经开始使用它并更好地了解它了。

这是到目前为止我发现的最好的资源： https://medium.cobeisfresh.com/level-up-your-react-architecture-with-mvvm-a471979e3f21，尽管...它正在使用类和mobX。

MVVM体系结构（据我了解）

模型

保留状态，在我的示例中为Redux。

ViewModel

用作模型和ViewController之间的中间人。它处理业务逻辑并具有更新模型的能力。

ViewController

视图上方的层，用于响应用户操作而调用从模型派生的行为。同时更新要在视图上显示的数据。

查看

虚拟组件，仅显示通过道具或其他方式传入的数据并进行相应渲染。

我尝试将下面的逻辑分解为类似于MVVM的某种东西，但我一直没有成功。这个组件非常简单，它只是从Redux的钩子中读取（<useSelector />）状态，并在return语句中吐出信息。第二个文件是第一个组件的输出出现在屏幕上的位置。

import React from 'react';
import styled from 'styled-components';
import { useSelector } from 'react-redux';
import Skeleton from 'react-loading-skeleton';
import styles, { H300, PSpan } from '../../../ui/styles/variables';
import ProfileImage from '../../ProfileImage/ProfileImage';
const { colors, borders, effects } = styles;

const UserWidget = () => {
  const loading = useSelector((state) => state.auth.loading);
  const user = useSelector((state) => state.auth.user);

  if (loading) {
    return (
      <Content>
        <CustomSkeleton circle height={100} width={100} />
        <CustomSkeleton count={4} height={15} width={130} />
      </Content>
    );
  }

  return (
    <Content className="WIDGET">
      <ProfileImage email={user.email} />
      <Username>{user.username}</Username>
      <UserGlobalStats>
        <H300>117,311</H300>
        <PSpan>Points</PSpan>
        <H300>339</H300>
        <PSpan>Words Learned</PSpan>
      </UserGlobalStats>
    </Content>
  );
};

export default UserWidget;

import React from 'react';
import CalendarWidget from '../../../components/_widgets/CalendarWidget/CalendarWidget';
import ModuleHeader from '../../../components/Module/Header/ModuleHeader';
import ModuleBody from '../../../components/Module/Body/ModuleBody';
import ModProgressWidget from '../../../components/_widgets/ModProgressWgt/ModProgressWgt';
import ButtonBlock from '../../../components/_widgets/ButtonBlock/ButtonBlock';
import { Page, LColumn, RColumn } from '../../../ui/styles/layouts';
import UserWidget from '../../../components/_widgets/UserWidget/UserWidget';

const OverviewPage = () => {

  return (
    <Page>
      <LColumn>
        <UserWidget />     <------ Here
        <CalendarWidget />
      </LColumn>
      <ModuleHeader difficulty="Beginners" language="French" />
      <ModuleBody layout="overview" />
      <RColumn>
        <ModProgressWidget />
        <ButtonBlock />
      </RColumn>
    </Page>
  );
};

export default OverviewPage;

任何帮助将不胜感激。我真的不想毁掉和扎根我一直在努力的一切，以包括一些不同的技术。我见过一个神秘的答案，说可以通过MVVM处理钩子。当然redux可能是正确的吗？

具有Redux和MVVM体系结构的React Hooks

0 个答案: