刚接触react的时候,有人感叹这不就是当年的JSP吗?直接用代码生成html,两者混在一起,还真有不少人喜欢把事件响应和业务逻辑都写在component里面,看起来就头疼。当年的JSP已经被MVC所终结,我们可以借鉴MVC的思想让React-Redux的代码好写又好看。 先回顾一下MVC思想,如下图:
用户的请求先由Controller进行处理,处理后的数据放入Model,View根据Model的数据渲染界面呈现在用户面前。 React-Redux中应用MVC:
1. Model 对应Redux store
Redux store由几个数据模块组成,每个模块中的数据在一组页面或者一个业务流程中使用。
redux/rootReducer.js
import {reducer as common} from ‘./commonAction‘
import {reducer as online} from ‘./onlineAction‘
export default combineReducers({
common,
online,
})
2. View 对应React component
Component将数据呈现出来,要尽可能地只做页面显示,其它代码一概抽离,例如:
login/index.js
import {actions} from ‘./action‘;
class Login extends Component {
componentWillMount() {
this.props.clearSession();
}
render() {
const p = this.props;
return (
<div className="form">
<div className="input-group">
<label>User Name</label>
<input type="text" value={p.s.username} onChange={e=>p.updateFormValue({username: e.target.value})} >
</div>
<div className="input-group">
<label>Password</label>
<input type="password" value={p.s.password} onChange={e=>p.updateFormValue({password: e.target.value})} >
</div>
<div className="input-group">
<button type="button" className="btn btn-block" disabled={!p.s.loginReady} onClick={p.submitLogin} >Login</button>
</div>
</div>
)
}
}
export default connect(
store => ({ s: store.online }),
{ ...actions }
)(Login);
3. Controller
对应action,reducer store中的每个模块都有自己的reducer负责更新数据
redux/onlineAction.js
const types = {
UPDATE_VALUE: ‘ONLINE/UPDATE_VALUE‘,
}
export const actions = {
updateValue: values => (dispatch, getStore) => {
dispatch({type: types.UPDATE_VALUE, ...values});
},
}
const initStore = {
username: ‘‘,
password: ‘‘,
}
export const reducer = (store={...initStore}, action) => {
switch (action.type) {
case types.UPDATE_VALUE:
return {...store, ...action};
default:
return {...store};
}
}
把负责更新数据的action type,action,reducer合并成一个文件。有些教程说,每个变量都要一个特定的action type,action creator和reducer中的case。在我看来是没有意义的,一个数据更新action就够模块里面所有变量使用了,而且可以一次更新多个变量,在接收后台数据时提高效率。
每个页面都有在自己的action,处理自己的事件响应和业务逻辑。当需要时就调用模块级别的action来更新数据。
login/action.js
import {actions as onlineActions} from ‘../redux/onlineAction‘;
export const actions = {
updateFormValue: value => (dispatch, getStore) => {
dispatch(onlineActions.updateValue(value));
dispatch(actions.verifyValue());
},
verifyValue: () => (dispatch, getStore) => {
const {username, password} = getStore().online;
let loginReady = username.length >= 6;
loginReady = loginReady && password.length >= 6;
dispatch(onlineActions.updateValue(loginReady));
},
submitLogin: () => (dispatch, getStore) => {
const {username, password} = getStore().online;
// submit data to server ...
}
}
这里讨论了一种React-Redux项目的参考编码风格,让代码看起来有MVC感觉,好写好看。 另外,thunk只是入门级的中间件,对自己有要求的同学应该去学习一下saga。
MVC无人不知,可很多程序员对MVC的概念的理解似乎有误,换言之他们一直在错用MVC,尽管即使如此软件也能被写出来,然而软件内部代码的组织方式却是不科学的,这会影响到软件的可维护性、可移植性,代码的可重用性。
三层架构和MVC是有明显区别的,MVC应该是表现模式(三个加起来以后才是三层架构中的UI层)。三层架构通常意义上的三层架构就是将整个业务应用划分为:表现层(UI)、业务逻辑层(BLL)、数据访问层(DAL)
MVC的思想:一句话描述就是Controller负责将Model的数据用View显示出来,换句话说就是在Controller里面把Model的数据赋值给View;MVVM开发者为数据解析创建出了一个新的类:ViewModel
三层架构指的是: 视图层(View),服务层(Service)和持久层(DAO). 他们分别负责不同的功能.。单纯就是指后台的设计架构,这种架构模式是从微软来的
MVC模式的意思是,可以分成三个部分:视图(View):用户界面。控制器(Controller):业务逻辑,模型(Model):数据保存
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!