关于复杂业务组件的重用问题

[laketea]

参考 reduxjs/react-redux#278
关于复杂业务组件的重用问题，在dva的结构下有没有一些好的思路.
还是以一个具体的场景来描述这个问题吧.

比如登录模块,按照dva的架构，登录的代码分散在三个部分:

• login component
• login service
• login model

假如需要复用登录模块，涉及到下面几个问题:

• 公用模块的代码组织
• 项目中如何使用登录模块
  目前的情况，要使用登录模块需要 app.model(login), route中配置登录组件, 从组件复用的角度来看，是否 将model直接绑定到component 会更方便?
• 登录组件的配置
  比如部分项目中需要显示注册链接，部分项目又不需要，这些配置存放在哪个模块，如何传入组件中
• 样式调整
  dva中使用了css module 如何对登录的样式进行部分调整?

dva应用到实际项目中，特别是一定规模的项目，多少会涉及到复杂业务组件的复用问题，希望能分享一下相关的思路。

[nikogu]

你说的这个样例，更好的方式是，login component 不走 dva 吧，比如我引入了 <Login /> ，这个组件就是一个完整的包含UI，交互，逻辑，请求的组件。

dva 是为了更好的组织你项目，也不一定非要处处都要使用 dva 的方式。

[grunmin]

@nikogu 你的意思是component还是 extends React.Component的写法是吗, 但是actions和reducer好像不好放

[nikogu]

对，既然本身的数据流跟其它组建无关，又要抽离独立的模块，就抽象成一个整体好了，不走 dva

[sorrycc]

我倒觉得是有这种需求的，但还没仔细考虑过怎么处理，redux 的方案本身在处理这类包含数据处理的业务组件时就比较弱。

[afc163]

直接把数据 connect 到组件里。

[Blet]

用高阶组件组合， 内部逻辑都写一个组件，然后导入到UI组件，每次使用的时候，都是引入这个高阶组件。
最终形式如下：

import LoginHOC from "./loginHOC"

const Login  = LoginHOC( UIComponent );

//LoginHOC 我们在这个组件写好我们的登录逻辑，例如拿到store的数据
//触发action等等，然后导出成值传给我们的UIComponent
//然后我们就可以把这个Login 组件在当前页面直接应用了

[liuxuewen1]

如果登录和注册都使用到 用户名、密码、验证码这种组合，怎么样在一个store去做处理呢？
我的想法是：combineReducers 的时候，通过高阶函数去返回一个新的函数，再通过标识符去区分调用的是哪一个 reducer。就是有点麻烦。也就是这个里面说的 http://cn.redux.js.org/docs/recipes/reducers/ReusingReducerLogic.html

[Blet]

你说的的组合是指UI的组合而已吧，因为登录注册在我的项目里是两个不同的业务流程，最好是封装成两个不同的高阶组件，

[badplum]

最近也遇到这种问题，有一些页面ui和逻辑都一致，简单说就是长得一样。只是配置不同。这种情况下把按照action-reducer的写法会非常苦，作高阶组件封装，也免不了作各种适配吧。
感觉这种情况，还是作内部state靠谱点，包括ajax都走内部解决，这样提供相关的配置就好了。
各位大神有什么更合适的观点么？