Flux是Facebook提出的一种新的架构模式。一个Flux架构一般分为4个部分：
- View：视图层（界面）
- Action:视图层发出的消息或事件，如点击按钮
- Dispatcher：派发器，用来接受Actions、执行回调函数
- Store：数据层，用来存放应用状态，一旦发生变动，就要通知Views更新界面
执行流程
- 用户操作（访问）View
- View发出用户的Action给Dispatcher
- Dispatcher接收到Action，通知Store更新数据（比如更新Store里checkbox的选中状态）
- Store更新后，通知View进行界面刷新
- View收到通知后，更新界面。
看个例子：
现在有一个菜单叫MenuView 和一个目内容页叫ContentView，对应存储菜单数据的叫MenuStore、存储内容页数据的叫ContentStore，一个分发器Dispatcher、定义了两个动作叫MenuAction和ContentAction。我们现在模拟菜单的点击（itemClicked）看看数据是如何流转的，最后又是如何更新在界面上的。
先来看看涉及类的类图：
java代码：
/**
*
* Flux is the application architecture that Facebook uses for building client-side web
* applications. Flux eschews MVC in favor of a unidirectional data flow. When a user interacts with
* a React view, the view propagates an action through a central dispatcher, to the various stores
* that hold the application's data and business logic, which updates all of the views that are
* affected.
* <p>
* This example has two views: menu and content. They represent typical main menu and content area
* of a web page. When menu item is clicked it triggers events through the dispatcher. The events
* are received and handled by the stores updating their data as needed. The stores then notify the
* views that they should rerender themselves.
* <p>
* http://facebook.github.io/flux/docs/overview.html
*
*/
public class App {
/**
* Program entry point
*
* @param args command line args
*/
public static void main(String[] args) {
// initialize and wire the system
MenuStore menuStore = new MenuStore();
Dispatcher.getInstance().registerStore(menuStore);
ContentStore contentStore = new ContentStore();
Dispatcher.getInstance().registerStore(contentStore);
MenuView menuView = new MenuView();
menuStore.registerView(menuView);
ContentView contentView = new ContentView();
contentStore.registerView(contentView);
// render initial view
menuView.render();
contentView.render();
// user clicks another menu item
// this triggers action dispatching and eventually causes views to render with new content
menuView.itemClicked(MenuItem.COMPANY);
}
}
/**
*
* Views define the representation of data.
*
*/
public interface View {
void storeChanged(Store store);
void render();
}
/**
*
* MenuView is a concrete view.
*
*/
public class MenuView implements View {
private static final Logger LOGGER = LoggerFactory.getLogger(MenuView.class);
private MenuItem selected = MenuItem.HOME;
@Override
public void storeChanged(Store store) {
MenuStore menuStore = (MenuStore) store;
selected = menuStore.getSelected();
render();
}
@Override
public void render() {
for (MenuItem item : MenuItem.values()) {
if (selected.equals(item)) {
LOGGER.info("* {}", item);
} else {
LOGGER.info(item.toString());
}
}
}
public void itemClicked(MenuItem item) {
Dispatcher.getInstance().menuItemSelected(item);
}
}
/**
*
* ContentView is a concrete view.
*
*/
public class ContentView implements View {
private static final Logger LOGGER = LoggerFactory.getLogger(ContentView.class);
private Content content = Content.PRODUCTS;
@Override
public void storeChanged(Store store) {
ContentStore contentStore = (ContentStore) store;
content = contentStore.getContent();
render();
}
@Override
public void render() {
LOGGER.info(content.toString());
}
}
/**
*
* Store is a data model.
*
*/
public abstract class Store {
private List<View> views = new LinkedList<>();
public abstract void onAction(Action action);
public void registerView(View view) {
views.add(view);
}
protected void notifyChange() {
views.stream().forEach(view -> view.storeChanged(this));
}
}
/**
*
* MenuStore is a concrete store.
*
*/
public class MenuStore extends Store {
private MenuItem selected = MenuItem.HOME;
@Override
public void onAction(Action action) {
if (action.getType().equals(ActionType.MENU_ITEM_SELECTED)) {
MenuAction menuAction = (MenuAction) action;
selected = menuAction.getMenuItem();
notifyChange();
}
}
public MenuItem getSelected() {
return selected;
}
}
/**
*
* ContentStore is a concrete store.
*
*/
public class ContentStore extends Store {
private Content content = Content.PRODUCTS;
@Override
public void onAction(Action action) {
if (action.getType().equals(ActionType.CONTENT_CHANGED)) {
ContentAction contentAction = (ContentAction) action;
content = contentAction.getContent();
notifyChange();
}
}
public Content getContent() {
return content;
}
}
/**
*
* Action is the data payload dispatched to the stores when something happens.
*
*/
public abstract class Action {
private ActionType type;
public Action(ActionType type) {
this.type = type;
}
public ActionType getType() {
return type;
}
}
/**
*
* MenuAction is a concrete action.
*
*/
public class MenuAction extends Action {
private MenuItem menuItem;
public MenuAction(MenuItem menuItem) {
super(ActionType.MENU_ITEM_SELECTED);
this.menuItem = menuItem;
}
public MenuItem getMenuItem() {
return menuItem;
}
}
/**
*
* ContentAction is a concrete action.
*
*/
public class ContentAction extends Action {
private Content content;
public ContentAction(Content content) {
super(ActionType.CONTENT_CHANGED);
this.content = content;
}
public Content getContent() {
return content;
}
}
/**
*
* Menu items.
*
*/
public enum MenuItem {
HOME("Home"), PRODUCTS("Products"), COMPANY("Company");
private String title;
MenuItem(String title) {
this.title = title;
}
@Override
public String toString() {
return title;
}
}/**
*
* Content items.
*
*/
public enum Content {
PRODUCTS("Products - This page lists the company's products."), COMPANY(
"Company - This page displays information about the company.");
private String title;
private Content(String title) {
this.title = title;
}
@Override
public String toString() {
return title;
}
}
App.java中最后一行就是模拟的用户点击选择菜单的操作。