Flux流程
1、要想使用Flux架构思维,需要通过一个工具进行使用, 这个工具就是flux
2、安装 flux $ yarn add flux
3、在src目录下 新建store目录,里面新建index.js
-
store有两个功能
-
存储数据
-
当数据发生改变时,视图要进行更新 ( 当前组件中的state发生了改变,重新从store中获取数据,要想重新复制,那么要通过事件的发布,订阅 )
// store/index.js //store的作用: //1、存储数据 2、更新视图(也即给了store事件发布on和订阅emit的能力) const EventEmitter = require( 'events' ).EventEmitter const store = { ...EventEmitter.prototype,//解构这,使得store上有on和emit state: {//定义数据 count: 0 }, getState () {//获取数据的方法 return this.state } } export default store
-
4、将store中的数据显示在组件(视图)中
import store from './store'
class xxx extends React.Component{
constructor (props) {
super(props)
this.state = {
count: store.getState().count//从store中获取数据
}
}
render () {
return (
<div>
<p> { this.state.count } </p>
</div>
)
}
}
5、用户操作,用户点击按钮,执行当前组件中的方法,这个方法的逻辑实际上是actionCreators中的方法
6、创建actionCreators.js
-
actions的发送要通过dispatcher来发送
//actionCreators作用: //1、用户交互,也就是所谓的事件 2、创建动作,然后发送给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
-
创建dispatcher.js
//作用:动作的触发者,用于修改数据 import { Dispatcher } from 'flux'; import * as type from './type' import state from './state' const dispatcher = new Dispatcher() // dispatcher.register( callback ) dispatcher的注册 dispatcher.register( ( actions) => { switch ( actions.type ) { case type.INCRMENT: // 用户操作了 store.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 = {
num: store.getState().count
}
}
add () {//点击按钮时触发订阅
actionCreators.increment()
store.emit('zengjia')
}
componentDidMount () {//组件初始化时,就做视图更新的事件发布
store.on('zengjia', () => {
this.setState({
count: store.getState().count
})
})
}
render () {
return (
<div>
<h3> flux </h3>
<button onClick = { this.add }> + </button>
<p> count: { this.state.count } </p>
</div>
)
}
}
export default App;