AndroidFlux试用

2017-08-01 本文已影响71人小吵闹123

纸上得来终觉浅，绝知此事要躬行

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，重复以上逻辑。

AndroidFlux试用

Flux

Demo

猜你喜欢

热点阅读