React

在Elux项目中使用React,默认使用Immutable数据模式,即reducer中修改moduleState时,不能直接修改原对象,必需返回一个新对象(与Redux类似)。

使用React

// src/modules/article/views/Main.tsx
import {connectStore} from '@elux/react-web';
import {APPState, useStore, useRouter} from '@/Global';

export interface StoreProps {
    currentView?: CurrentView;
    itemDetail?: ItemDetail;
}

function mapStateToProps(appState: APPState): StoreProps {
    const {currentView, itemDetail} = appState.article!;
    return {currentView, itemDetail};
}

const Component: FC<StoreProps> = ({currentView, itemDetail}) => {
    //获取Store和Router,可以使用`useStore()`和`useRouter()`
    const store = useStore();
    const router = useRouter();
    ...
}

export default connectStore(mapStateToProps)(Component);

内置组件

框架中内置了4个常用的React组件,参见内置组件

暂未支持V18中的Suspense

react 18中的新Suspense方案很好的解决了SSR时数据集中加载的问题,值得借鉴和使用。但Vue中尚无类似解决方案,这也极大增加了对于UI特殊功能的依赖,所以暂未支持。