flux的基本使用

flux的基本使用

什么是MVC？
MVC的全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，是一种软件设计典范。
V即View视图是指用户看到并与之交互的界面。
M即Model模型是管理数据 ，很多业务逻辑都在模型中完成。在MVC的三个部件中，模型拥有最多的处理任务。
C即Controller控制器是指控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。
MVC只是看起来很美
MVC框架的数据流很理想，请求先到Controller, 由Controller调用Model中的数据交给View进行渲染，但是在实际的项目中，又是允许Model和View直接通信的。为了解决这个缺陷，就衍生出来了几个新的架构思想：flux,Redux,mobx

传统MVC的缺陷

• 传统MVC没有解决 M 和 V 之间的交互关系
• 为了弥补这个缺陷，人们相处了 Flux Redux Mobx 这样三种架构思维 ， 那么React只是这三种架构的一个组成部分，那么这个组成部分充当的是 View( 视图 )
• Flux Redux Mobx 和 MVC 是一个级别的，相比之下， vuex级别要小的多 ，但是他们解决的都是多组件状态共享
• 问题： 我想在Redux中使用vue , 可以吗？ 可以的

Flux

Flux架构的使用需要借助一个工具， 这个工具叫做 flux

Flux的使用流程

1. 要想使用FLux架构思维，需要通过一个工具进行使用， 这个工具就是flux
2. 安装 flux
   $ yarn add flux
3. 在src目录下 新建store目录，里面新建index.js

• store有两个功能
• 存储数据
• 当数据发生改变时，视图要进行更新 （ 当前组件中的state发生了改变，从新从store中获取数据，要想重新复制，那么要通过事件的发布，订阅 ）

// store/index.js

import state from ' ./state '
const EventEmitter = require( 'events' ).EventEmitter

const store = {
    ...EventEmitter.prototype,// 解构，这样store中就会继承events中的方法
   state,
    getState () {//将state中的数据返回出去
         return this.state
    }
}
export default store

4. 将store中的数据显示在组件（视图）中

import store from './store'

class xxx extends React.Component{
    constructor () {
        super()
        this.state = {
            count: store.getState().count
        }
    }
    render () {
    return (
    <div>
    <p> { this.state.count } </p>
    </div>
    )
    }
}

5. 用户操作，用户点击按钮，执行当前组件中的方法，这个方法的逻辑实际上是actionCreators中的方法
6. 创建actionCreators.js

• actions的发送要通过dispatcher来发送

import * as type from './type'
import dispatcher from './dispatcher';

const actionCreators = {
    increment () {
        // 创建动作
        let actions = {
            type: type.INCRMENT
        }
        // dispatcher来通过dispatch 发送actions
        dispatcher.dispatch( actions )
    }
}
export default actionCreators

7. 创建dispatcher.js

import { Dispatcher } from 'flux';
import * as type from './type'
import state from './state'

const dispatcher = new Dispatcher()
    // dispatcher.register( callback )
    
    dispatcher.register( ( actions) => {
        switch ( actions.type ) {
            case type.INCRMENT:
            // 用户操作了
            state.count++
            break;
            default:
            break;
        }
})
export default dispatcher

8. 通过store的事件的发布和订阅进行 当前组件中 state 的重新赋值

• 当我们点击按钮是，要通过store的事件的订阅给当前组件的state重新赋值，要想这样做，我们必须进行事件的发布
• 组件的生命周期中，数据可以进行一次修改的可以往 componentWillMount // componentDidMount
• 当我们点击按钮的时候，就要修改当前组件的state,也就是要进行事件的订阅

import React from 'react';
import logo from './logo.svg';
import './App.css';
import store from './store'
import actionCreators from './store/actionCreators';

class App extends React.Component {
    constructor () {
        super()
        this.state = {
            count: store.getState().count//actionCreatora中定义的数据
        }
    }
    
    //每次点击都会触发actionCreators中的方法，然后发送动作到dispatcher中，在dispatcher中进行数据的修改
    increment () {
        actionCreators.increment()
        store.emit('count')
    }
    
    //数据的重新赋值，每次数据改变都要重新获取到state中的数据然后进行赋值
    componentDidMount () {
        store.on('count', () => {
            this.setState({
                count: store.getState().count
            })
        })
    }
    render () {
    return (
    <div>
        <h3> flux </h3>
        <button onClick = { this.increment }> + </button>
        <p> count: { this.state.count } </p>
    </div>
    )
    }
}
export default App;