Flux在Android中的使用

Flux.png

今天想和大家分享一下Flux,Flux是Facebook用来构建Web应用的架构,目前在React中被广泛使用。有这几点需要注意,Flux是模式而不是框架,是单向数据流,是MVC最好的实践。 至于为什么要使用Flux,我们可以看一个Facebook遇到的问题。

Facebook.png

一开始,产品需求是聊天信息在右下角的chat View显示,如果用户没有点击,右上角出现红色标示,后来产品需要在中间的View中显示,如果已经被用户看到,则右上角不出现红色标示,一段时间之后,产品又需要在左边新增一个通讯录列表,可以显示最近的聊天信息,如果用户看到,则右上角不出现红色标示。(没有看错,就是如此让人不省心,哈哈。)
产品结构如下:

Full System.png

然后我们看下代码:

Chat Code.png

我们可以看到,随着产品需求不断地累加,代码块越来越臃肿,很不利于维护,于是,Facebook推出了Flux,我们来看下Flux结构:

Flux结构

各模块的介绍:

  1. View:视图层
  2. Action(动作):视图层发出的消息
  3. Dispatcher(派发器):接收、派遣Action
  4. Store(数据层):接受派遣的Action,执行业务逻辑,提醒Views更新
流程图.png

我们来看看在Android中如何使用,例子是一个TODO App,输入Todo内容,点击添加按钮,显示输入的Todo列表:

ToDo_App.png

TodoActionCreator

Action生成器,创建CREATE和GET_ALL Action

public class TodoActionCreator {    
public static final String ID = "id";    
public static final String TEXT = "text";    
public static final int ACTION_CREATE = 0;    
public static final int ACTION_GET_ALL = 1;    
private Dispatcher dispatcher;    
......
public void create(String text) {        
  dispatcher.dispatch(ACTION_CREATE, TEXT, text);    
  }    
public void getAll(){        
  dispatcher.dispatch(ACTION_GET_ALL);    
  }
}

Dispatcher

public class Dispatcher {    
private static Dispatcher dispatcher;    
private Store.OnStoreChangeListener onStoreChangeListener;    
public Dispatcher(Store.OnStoreChangeListener onStoreChangeListener) {
  this.onStoreChangeListener = onStoreChangeListener;    
  }    
......
public void dispatch(int type, Object... data){        
  HashMap<String, Object> hashMap = new HashMap<>();        
  int i = 0;        
  while (i < data.length) {            
  String key = (String) data[i++];            
  Object value = data[i++];            
  hashMap.put(key, value);        
  }        
  Action action = new Action(type, hashMap);        
  if (!isTodoStore(action)) {            
  return;        
  }        
  Store store;        
  if (isTodoStore(action)) {            
  store = new TodoStore(onStoreChangeListener); 
  store.onAction(new Action(type, hashMap));        
  }   
  }    
  private boolean isTodoStore(Action action) {        
  return action.getType() == TodoActionCreator.ACTION_GET_ALL || action.getType() == TodoActionCreator.ACTION_CREATE;    
  }
}

TodoStore

public class TodoStore extends Store{    
public TodoStore(OnStoreChangeListener onStoreChangeListener) {        
  super(onStoreChangeListener);    
  }    
@Override    
public void onAction(Action action) {        
  switch (action.getType()){            
  case TodoActionCreator.ACTION_CREATE:                
  create((String) action.getHashMap().get(TodoActionCreator.TEXT)); 
  emitStoreChange();                
  break;            
  case TodoActionCreator.ACTION_GET_ALL:                
  emitStoreChange();                
  break;        
  }    
  }    
@Override    
StoreChangeEvent changeEvent() {        
  StoreChangeEvent storeChangeEvent = new StoreChangeEvent();          
  storeChangeEvent.value = TodoRepositories.getTodos();        
  return storeChangeEvent;    
  }    
private void create(String text) {          
  TodoRepositories.getTodos().add(new Todo(new Random().nextInt(), text));    
  }
}

MainActivity

public class MainActivity extends AppCompatActivity implements Store.OnStoreChangeListener, View.OnClickListener{    
private RecyclerView rvContent;    
private EditText etTodo;    
private Button btnAdd;    
private ContentAdapter mContentAdapter;    
private TodoActionCreator todoActionCreator;    
@Override    
protected void onCreate(Bundle savedInstanceState) {          
  super.onCreate(savedInstanceState);          
  setContentView(R.layout.activity_main);        
  rvContent = (RecyclerView) findViewById(R.id.rvContent);          
  rvContent.setLayoutManager(new LinearLayoutManager(this));//这里用线性显示 类似于listview        
  etTodo = (EditText) findViewById(R.id.etTodo);        
  btnAdd = (Button) findViewById(R.id.btnAdd);          
  btnAdd.setOnClickListener(this);        
  mContentAdapter = new ContentAdapter(new ArrayList<Todo>(),this);          
  rvContent.setAdapter(mContentAdapter);        
  todoActionCreator = TodoActionCreator.get(Dispatcher.get(this));          
  todoActionCreator.getAll();    
}    
@Override    
public void OnStoreChange(Store.StoreChangeEvent storeChangeEvent) {          
  mContentAdapter.update((ArrayList<Todo>) storeChangeEvent.value);            
  mContentAdapter.notifyDataSetChanged();    }    
@Override    
public void onClick(View v) {        
  switch (v.getId()){            
  case R.id.btnAdd:                
  String text = etTodo.getText().toString();                  
  todoActionCreator.create(text);                
  etTodo.setText("");                
  break;        
  }    
}}

代码链接: http://pan.baidu.com/s/1c1oovss 密码: 9jnk

VS MVC

我们可以拿MVC比较一下,理想中MVC如下:

MVC_理想.png

但在使用过程,一不小心就增加了View和Model之间的交互,导致Model和View之间的错综复杂,不利于维护和测试。

MVC_现实.png
MVC结构.png

而Flux则可以维持数据的单向性,如下:

Flux结构.png

总结

Flux优点

  1. Improved data consistency 改善数据统一
  2. Easier to pinpoint root of bug 方便找到bug
  3. More meaningful unit tests 产生更多有意义的单元测试

Flux缺点

  1. Dispatcher 容易臃肿,复杂
  2. 代码过于模板化
  3. 移植现有代码比较困难

参考

Flux开发文档

原始地址: http://www.jianshu.com/p/d6f9d2ee64a2,欢迎关注我的微博

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,142评论 25 708
  • Android项目做了不少,难免遇到因为在项目架构上设计不合理或者根本没有形成统一的编程思想,导致各种意外的情况出...
    Forrest32阅读 6,027评论 11 34
  • 在一处悬崖边上,住着一群狼,但这儿的狼王是母狼,而并非是公狼。 这事情的原因要从半年前的意外说起了。 那是一个寒风...
    孤樱落_淡秋离阅读 495评论 1 3
  • 很久没有写字了,今天却突然有了写点什么的冲动。大学一年来其实什么收获都没有,却还在混混度日,有想做什么的冲动,却一...
    安坞阅读 583评论 0 0
  • 恋恋风尘练练新
    一一无痕阅读 308评论 44 23