React第三方组件4(状态管理之Reflux的使用①简单使用)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1、React第三方组件4(状态管理之Reflux的使用①简单使用)---2018.03.13

2、React第三方组件4(状态管理之Reflux的使用②TodoList上)---2018.03.14

3、React第三方组件4(状态管理之Reflux的使用③TodoList中)---2018.03.15

4、React第三方组件4(状态管理之Reflux的使用④TodoList下)---2018.03.16

5、React第三方组件4(状态管理之Reflux的使用⑤异步操作)---2018.03.19

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

先说下ReFlux

引用:https://segmentfault.com/a/1190000004843954 一个简单的单向数据流应用库,灵感来自于ReactJS Flux. ╔═════════╗ ╔════════╗ ╔═════════════════╗ ║ Actions ║──>║ Stores ║──>║ View Components ║ ╚═════════╝ ╚════════╝ ╚═════════════════╝ ^ │ └──────────────────────────────────────┘ 同React Flux比较 refluxjs的目标是为了让我们更容易的搭建Web应用程序。 相同点 1、有actions 2、有stores 3、单向数据流 不同点 1、通过内部拓展actions的行为,移除了单例的dispatcher 2、stores可以监听actions的行为,无需进行冗杂的switch判断 3、stores可以相互监听,可以进行进一步的数据聚合操作,类似于,map/reduce 4、waitFor被连续和平行的数据流所替代

我们直接撸码!

先安装reflux

npm i -S reflux

1、我们建立下reflux目录,及reflux1目录,和Index.jsx

2、reflux下的Index.jsx代码

import React from 'react';
import {HashRouter, Route, NavLink, Redirect} from 'react-router-dom';
import ReFlux1 from './reFlux1/Index'

const Index = ({match}) =>
    <HashRouter>
        <div>
            <div className="nav">
                <NavLink to="/ReFlux/ReFlux1" activeClassName="selected">ReFlux1</NavLink>
            </div>
            <Route exact path={`${match.url}`}
                   render={() => (<Redirect to={`${match.url}/ReFlux1`}/>)}/>
            <Route path={`${match.url}/ReFlux1`} component={ReFlux1}/>
        </div>
    </HashRouter>
;

export default Index;

3、reflux1下建立Index.jsx

import React from 'react'
import Reflux from 'reflux'
import Action from './Action'
import Store from './Store'

class Index extends Reflux.Component {
    constructor(props) {
        super(props);
        this.store = Store;
    }

    render() {
        return (
            <div className="todoList">
                {this.state.num}
                <button onClick={() => Action.add()}>+</button>
            </div>
        );
    }
}

export default Index;

注意这几个框起来的!

4、建立Store.js

import Reflux from 'reflux'
import Action from './Action'

class Store extends Reflux.Store {
    constructor() {
        super();
        this.listenables = Action;
        this.state = {
            num: 0
        }
    }

    onAdd() {
        this.setState({num: this.state.num + 1});
    }
}

export default Store;

5、建立Action.js

import Reflux from 'reflux'

let Action = Reflux.createActions([
    'add'
]);
export default Action;

到这里就结束了,相对比较简单!

6、查看浏览器

如果你有什么问题,可以在下方留言给我们!

原文发布于微信公众号 - 前端人人(frontend_everyone)

原文发表时间:2018-03-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程之路

羊皮书APP(Android版)开发系列(一)Icon图片生成神器

        工欲善其事,必先利其器,我们要开发一款app,首先我们肯定要知道app的名字,其次我们就要准备app的logo图片,而这个logo图片又有多种尺...

913
来自专栏前端大白专栏

基于mpvue开发微信小程序,vue能用的,用mpvue哪些情况不能用

3517
来自专栏Google Dart

AngularDart4.0 指南-体系结构概述 顶

AngularDart(我们通常在这个文档中简单地称为Angular)是一个框架,用于在HTML和Dart中构建客户端应用程序。它是作为Angular包发布的,...

843
来自专栏Python中文社区

运用Python实现WordPress网站大规模自动化发布文章

很多用WordPress建站的朋友都有这样的苦恼,网站建好了,没有时间自己写文章,慢慢就荒废了,还有的朋友在浏览器收集好多喜欢的博客网站地址,因为收集的网址太多...

6468
来自专栏数据结构笔记

python爬虫系列之 xpath实战:批量下载壁纸

我们要爬取的目标网站是:http://www.netbian.com/,这个网站长这样:

3264
来自专栏DannyHoo的专栏

底牌项目中的上传牌谱功能之将视图生成图片

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1072
来自专栏企鹅号快讯

小程序开发的40个技术窍门,纯干货!

微信小程序正式上线一周时间,相关话题持续升温。现在为大家筛选出小程序开发实战需要注意的40个技术点,供大家参考! ? 小程序开发的40个技术窍门 1 Q:为什么...

25010
来自专栏PHP技术大全

使用PHP辅助 快速制作一套自己的手写字体实践

笔者以前在网上看到有民间高手制作字体的相关事迹,觉得把自己的手写字用键盘敲出来是一件很有意思的事情,所以一直有时间想制作一套自己的手写体,前几天在网上搜索了一下...

1553
来自专栏腾讯NEXT学位

小程序初学者必读——小程序的简单入门

2193
来自专栏vue学习

26、有赞Vant组件库的引入及轮播图片预览的实现①

这里引入vant有点坑啊,,,因为官网不推荐一次性导入所有组件,所以按照推荐的使用按需引入组件方法引入组件。

1171

扫码关注云+社区

领取腾讯云代金券