React_被抛弃的的flux

React_被抛弃的的flux

Flux 架构的单向闭环数据流，虽然写起来还是有些繁琐和复杂性，但是更有助于我们理解这种数据模式。

flex.png

常规的数据流程：View => Action动作 => Dispatcher派发器 => Store数据层 => View

• Dispatcher：事件调度的中心，flux模型的中心枢纽，相当于MVC模式中的Controller层。它本质上是Store的回调注册。每个Store注册它自己并提供一个回调函数。当Dispatcher响应Action时，通过已注册的回调函数，将Action提供的数据负载发送给应用中的所有Store。
• Action：是一个动作，用来描述对数据的操作。

1. 通过Dispatcher中的dispatch，将action派发给Dispatcher。

2. Dispatcher通过register接收action，经过逻辑判断，根据action的类型调用store中修改数据的方法。

3. 而因为将observer与store通过Object.assign进行了合并，可以通过观察者模式，触发绑定在组件上的更新函数subscribe。

• 安装

cnpm install flux -S

案例

• 在App.js中引入了两个组件

import React, { Component } from 'react';
import One from "./components/one"
import Two from "./components/two"

export default class App extends Component {
 
  render() {
    return (
      <div>
        <One></One>
        <Two></Two>
      </div>
    )
  }
}

• one组件，从视图中调用handleClick触发action动作，对象中的属性名约定俗成为type

import React, { Component } from 'react'
import store from "../store/index"
import dispatcher from "../store/dispatcher"

class one extends Component {
    constructor() {
        super();
        this.state = store.getState();
        store.subscribe(this.handleUpdate.bind(this))
    }
    render() {
        return (
            <div>
                <h2>one组件:{this.state.n}</h2>
                <button onClick={this.handleClick.bind(this)}>One组件点击</button>
            </div>
        )
    }
    handleClick() {
        var action = {
            type: "NUM_ADD"
        }
        dispatcher.dispatch(action)
    }
    // 做组件的状态更新
    handleUpdate() {
        this.setState(store.getState());
    }
}

export default one;

• store/dispatcher.js事件处理中心，通过dispatcher中的register接收action动作

import { Dispatcher } from "flux"
import store from "./index"
const dispatcher = new Dispatcher();

// dispacher接收action
dispatcher.register((action)=>{
    switch(action.type){
        case "NUM_ADD":
            store.handleNumAdd();    
        break;
        case "NUM_REDUCE":break;
    }
})

export default dispatcher;

• 在store/index.js中定义了公共的存储空间，并绑定组件更新的函数，调用回调函数，触发one组件中的this.setState更新

import observer from "../observer"
// 公共的内存空间
var store = Object.assign(observer, {
    state: {
        n: 10
    },
    getState() {
        return this.state;
    },
    handleNumAdd() {
        this.state.n++;
        // 通过观察者模式更新视图
        this.$emit("update")
    },
    // 绑定组件更新的函数,
    subscribe(callback) {
        this.$on("update", callback)
    }
})
export default store;

• flux的缺点：

1. 频繁的引入store
2. UI组件和容器组件的拆分过于复杂
3. 无法对多个store进行管理
4. 需要每次都进行视图更新函数的绑定

而因为Redux的出现， flux的缺点被逐一解决 ~