Skip to content

M(immutable model)V(view component)C(react-router)

License

Notifications You must be signed in to change notification settings

ustccjw/reactmvc

Repository files navigation

reactmvc NPM version

M(immutable model)V(react component)C(react-router)

一个用于 React app 的 MVC 解决方案

安装

$ npm i reactmvc --save

介绍

Traditional MVC

traditional_mvc

MVC in frontend

mvc_in_frontend

Model, Controller, View

  1. Model: 分为 dataModel 和 uiModel,基于 Immutable-js。dataModel 实现服务端数据接口的抽象,提供存取、缓存、清空接口;uiModel 是本地 UI 数据的抽象。提供本地 UI 数据的存取操作。基于 Immutable-js 保证 model 的安全。
  2. Controller: React-router,根据 router 获取需要渲染的组件,并且从 Model 中提取组件需要的数据(服务端数据和本地 UI 数据),然后返回需要渲染的组件以及需要的 props 数据。
  3. View: React Component(stateless component)

目标

  1. 分离服务端数据和本地 UI 数据。对服务端数据接口进行抽象才能真正实现服务端数据共享,而且可以让我们更专注于 UI。props = uiModel + dataModel.filter(uiModel)。
  2. action 回归到本质:uiModel get/set, dataModel call/remove,数据获取更新只发生在渲染前。
  3. 数据更新只需要清空对应数据缓存(dataModel.remove)。
  4. 数据获取完全由 react-router 来管理,组件不需要关心数据获取,只需要关注描述渲染(stateless comonent)。

实现

  1. async-props:配合 React-router 实现异步渲染,先异步获取组件所需数据,然后再渲染组件。
  2. Model, HttpModel: 提供 dataModel 和 uiModel 的抽象类
  3. wrapper: router component 的高阶组件,将组件渲染所需数据和 action 绑定到组件 props 上

About

M(immutable model)V(view component)C(react-router)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published