纸上得来终觉浅,绝知此事要躬行
Flux
Flux是Facebook在2014年提出的一种Web前端架构,主要用来处理复杂的UI逻辑的一致性问题。AndroidFlux就是利用flux的思想在android平台上的应用。
flux最大的特点就是单向的数据流,它的UI状态更新模式继承了MVC模式的设计思想。flux框架中主要包含三个部分
- Dispatcher: flux中数据流的中转枢纽,通过dispatcher把数据分发到store,传送的对象是一个action
- Store: 包含应用的状态和逻辑,它负责管理App中一片逻辑相关的UI区域
- View: 这里的view是view-controller,负责数据分发和UI逻辑的处理,对应android中的Activity
借用一张官方的图
从图中可以看出数据是朝单一方向流动的,单项数据流是Flux模式的核心,各个View可以在响应用户操作的时候产生新的action,新的action再通过dispatcher分发给store,store通过状态或数据的变化再通知view发生相应的UI上的变化
Demo
下面通过一个官方的demo实践一下flux框架。首先新建一个dispatcher类,从上面的简介中可以看到,它负责向store分发数据,需要register()和unregister()两个方法管理所有的store。同时需要dispatch()方法进行数据分发,因为分发的数据都会封装为action,所以dispatch()方法的参数为action。
public class Dispatcher {
private final List<Store> stores = new ArrayList<>();
private Dispatcher() {
}
private static class Singleton {
private static Dispatcher INSTANCE = new Dispatcher();
}
public static Dispatcher getInstance() {
return Singleton.INSTANCE;
}
public void register(Store store) {
stores.add(store);
}
public void unregister(Store store) {
stores.remove(store);
}
public void dispatch(Action action) {
post(action);
}
private void post(Action action) {
for (Store store : stores) {
store.onAction(action);
}
}
}
dispatcher需要通过action封装数据,下面看下action。action通过type来区分类型,代码如下
public class Action<T> {
private final String type;
private final T data;
public Action(String type, T data) {
this.type = type;
this.data = data;
}
public String getType() {
return type;
}
public T getData() {
return data;
}
}
这里用一个String类型的action进行测试,代码如下
public class MessageAction extends Action<String> {
public static final String ACTION_NEW_MESSAGE = "new_message";
public MessageAction(String type, String data) {
super(type, data);
}
}
在官方的demo中建议使用ActionCreator来生成一个action,ActionCreator可以用来生成action,并将action传递给dispatcher,代码如下
public class ActionCreator {
private Dispatcher mDispatcher;
private static class Singleton {
public static ActionCreator INSTANCE = new ActionCreator();
}
public ActionCreator create(Dispatcher dispatcher) {
this.mDispatcher = dispatcher;
return this;
}
public static ActionCreator getInstance() {
return Singleton.INSTANCE;
}
public void sendMessage(String message) {
MessageAction messageAction = new MessageAction(MessageAction.ACTION_NEW_MESSAGE, message);
mDispatcher.dispatch(messageAction);
}
}
接下来定义一个抽象类Store,主要用来向View发送changeEvent()时间。这里采用了EventBus,也可以自己写一个消息分发的方法。其中onAction(Action action)用来处理Dispatcher分发搞来的数据。
public abstract class Store {
private static EventBus sEventBus;
public Store() {
sEventBus = new EventBus();
}
public void register(Object view) {
sEventBus.register(view);
}
public void unregister(Object view) {
sEventBus.unregister(view);
}
void emitStoreChange() {
sEventBus.post(changeEvent());
}
public abstract StoreChangeEvent changeEvent();
public abstract void onAction(Action action);
public static class StoreChangeEvent {
}
}
之后实现MessageStore,实现Store中的abstract方法
public class MessageStore extends Store {
private Message mMessage = new Message();
public MessageStore() {
super();
}
public String getMessage() {
return mMessage.getMessage();
}
@Override
public StoreChangeEvent changeEvent() {
return new StoreChangeEvent();
}
@Subscribe
@Override
public void onAction(Action action) {
switch (action.getType()) {
case MessageAction.ACTION_NEW_MESSAGE:
mMessage.setMessage((String) action.getData());
break;
default:
}
emitStoreChange();
}
}
在流程中需要一个Model实体类,这里封装一个只有String类型的Model类
public class Message {
private String message;
public Message() {
}
public Message(String message) {
this.message = message;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}
最后,在一个view-controller中监听和处理dispatcher分发的事件,在onStoreChange()中监听变化来刷新UI。
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private EditText mEditText;
private TextView mTextView;
private Button mEditButton;
private Dispatcher mDispatcher;
private ActionCreator mActionCreator;
private MessageStore mMessageStore;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
init();
}
private void init() {
mDispatcher = Dispatcher.getInstance();
mActionCreator = ActionCreator.getInstance().create(mDispatcher);
mMessageStore = new MessageStore();
mDispatcher.register(mMessageStore);
}
private void initView() {
mEditText = (EditText) findViewById(R.id.edit_text);
mTextView = (TextView) findViewById(R.id.text_view);
mEditButton = (Button) findViewById(R.id.edit_button);
mEditButton.setOnClickListener(this);
}
@Override
public void onClick(View v) {
int id = v.getId();
if (id == R.id.edit_button) {
Editable text = mEditText.getText();
if (!TextUtils.isEmpty(text)) {
mActionCreator.sendMessage(text.toString());
}
}
}
@Override
protected void onResume() {
super.onResume();
mMessageStore.register(this);
}
@Override
protected void onPause() {
super.onPause();
mMessageStore.unregister(this);
}
@Subscribe
public void onStoreChange(Store.StoreChangeEvent event) {
mTextView.setText(mMessageStore.getMessage());
}
}
至此,就完成了一个简单的flux的demo,在输入框中输入内容后点击button,通过ActionCreator创建Action,并向dispatcher发送一个消息,再由dispatcher分发给个各个store,再通过store中的onAction()方法,将数据分发给view,view收到数据收通过onStoreChange()方法刷新UI。当view触发事件时,也通过ActionCreator创建一个Action,重复以上逻辑。