Flux的使用流程
一、Flux 组成部分View: 视图层 ( 用React的组件来代替 )ActionCreators(动作创造者):视图层发出的消息(比如mouseClick)Dispatcher(派发器):用来接收Actions、执行回调函数Store(数据层):用来存放应用的状态,一旦发生变动,就提醒Views要更新页面二、Flux的流程:组件获取到store中保存的数据挂载在自己的状态上...
·
一、Flux 组成部分
- View: 视图层 ( 用React的组件来代替 )
- ActionCreators(动作创造者):视图层发出的消息(比如mouseClick)
- Dispatcher(派发器):用来接收Actions、执行回调函数
- Store(数据层):用来存放应用的状态,一旦发生变动,就提醒Views要更新页面
二、Flux的流程:
- 组件获取到store中保存的数据挂载在自己的状态上 用户产生了操作,调用actions的方法
- actions接收到了用户的操作,进行一系列的逻辑代码、异步操作
- 然后actions会创建出对应的action,action带有标识性的属性
- actions调用dispatcher的dispatch方法将action传递给dispatcher
- dispatcher接收到action并根据标识信息判断之后,调用store的更改数据的方法
- store的方法被调用后,更改状态,并触发自己的某一个事件
- store更改状态后事件被触发,该事件的处理程序会通知view去获取最新的数据
- 要想使用FLux架构思维,需要通过一个工具进行使用, 这个工具就是flux
- 安装 flux
$ yarn add flux
- 在src目录下 新建store目录,
- 里面新建index.js,index.js 文件创建store对象
- store有两个功能
- 存储数据
- 当数据发生改变时,视图要进行更新 ( 当前组件中的state发生了改变,从新从store中获取数据,要想重新复制,那么要通过事件的发布,订阅 )
- store有两个功能
- 里面新建index.js,index.js 文件创建store对象
/*
1. 我们现在要创建 store,但是store有两个功能
1.1 存储数据
1.2 数据改变,视图才能更新 【 事件的发布和订阅来完成 】
*/
const events = require( 'events' )
const EventEmitter = events.EventEmitter
// console.log( EventEmitter.prototype )
const store = {
...EventEmitter.prototype, // 浅拷贝 数据的更新,视图更新
state: { // 数据存储
count: 0
},
getState () {
return this.state.count // 获取数据的方法
}
}
export default store
// // 事件的发布
// store.on('aa',function () {
// console.log('aa')
// })
// // 事件的订阅
// store.emit('aa')
4.将store中的数据显示在组件(视图)中
import React ,{ Component} from 'react';
import store from '../../store/index';
class Home extends Component {
constructor(){
super()
this.state={
count:store.getState().count
}
}
render(){
return(
<div>
<h3>flux</h3>
<p> {this.state.count} </p>
</div>
)
}
}
export default Home;
5.用户操作,用户点击按钮,执行当前组件中的方法,这个方法的逻辑实际上是actionCreators中的方法
6、创建actionCreators.js
actions的发送要通过dispatcher来发送
import * as type from './type';
import dispatcher from './dispatchers';
const actionsCreators = {
increment(){
//创建动作
let actions ={
type:type.INCREMENT
}
dispatcher.dispatch(actions)
}
}
export default actionsCreators;
7.创建dispatcher.js
import { Dispatcher } from 'flux'
import * as type from './type'
import state from './state'
const dispatcher = new Dispatcher()
// 注册dispatcher
dispatcher.register(( action ) => {
switch ( action.type ) {
case type.INCREMENT:
// 修改数据
state.count ++
console.log( state.count)
break;
default:
break;
}
})
export default dispatcher
8.通过store的事件的发布和订阅进行 当前组件中 state 的重新赋值
当我们点击按钮是,要通过store的事件的订阅给当前组件的state重新赋值,要想这样做,我们必须进行事件的发布
- 这个事件的发布往哪里写?
- 组件的生命周期中,数据可以进行一次修改的可以往 componentWillMount // componentDidMount - 这个事件的订阅那里写?
当我们点击按钮的时候,就要修改当前组件的state,也就是要进行事件的订阅
import React ,{ Component} from 'react';
import store from '../../store/index';
import actionsCreators from '../../store/actionsCreators';
class Home extends Component {
constructor(){
super()
this.state={
count:store.getState().count
}
}
increment=() =>{
actionsCreators.increment()
store.emit('add');
}
componentDidMount(){
store.on('add',()=>{
this.setState({
count:store.getState().count,
})
})
}
render(){
return(
<div>
<h3>flux</h3>
<button onClick= {this.increment} >增加</button>
<p> {this.state.count} </p>
</div>
)
}
}
export default Home;
更多推荐
已为社区贡献1条内容
所有评论(0)