React+Redux实战教程

  这是我在公司时候做的一个管理界面的React代码,当时是因为我leader说Angular坑太多了,所以叫我学习下这个,重做一遍那个项目T_T,于是我就花了一个多月去学习又做了一次T_T所以我也只是入门级水平,发出来是为了记录一下自己的心得体会,React-Redux、ES6新手可以看看,大神可以选择忽略或者给我指点一下~ =。=||

项目名字:React-backmanager

项目语言:ES6、ReactJs

模块分析:三个模块:CampaignContent、AddNew、BannerDetail

react的三个大模块的话,不跟angular的一样,因为react是以组件为单位的,所以整个大模块也是一个大组件。

用到的关键模块:react-redux、redux、react-router、pubsub-js(这个是维持不变的变量用的。)

redux的作用是维持全局一个store,保持数据的单向流动性。

react-redux就是为了跟react配合要加载的模块

react-router是我们关键的模块,用于路由.


Redux设计流程分析

1:首先要知道的一个问题就是,数据是单向流动的还是双向的?没错,是单向的,由store来保存一个总数据。通过修改store的数据来实现视图改变等需求。

2:但是我们知道,其实Redux不单可以和react配合,它也可以跟其他的库,框架配合使用的,所以对于两个独立的库来说,我们必须得把他们建立一个连接。

基于上面的简单思考,我们可以有一个思路来写代码了:

1:我们先得要创建一个store:

1.1

说白了,store里面就是一堆数据嘛,那么数据怎么来,通过reducer组合而来,所以createStore的时候,就要把初始化的数据传进来:rootReducer

1.2 rootReducer代码截图:

随着应用越来越大,一方面,不能把所有的数据都放到一个reducer里面,另一方面,为每个reducer创建一个store,后续store的维护就显得比较麻烦。如何将二者统一起来呢?

所以:通过combineReducers将多个reducer合并成一个rootReducer,虽然这里只有一个。

1.3 reducer的构建:

reducer的构建

而这些常量是自己定义的,如下图:

每次触发修改store数据的时候,只需要把制定好的动作执行并传参数进去就可以了。

其实常量也就是这些:

那么我们参数在哪里传入呢,下面就定义具体的构造如何传入参数:

这些是action里面的todos我们要执行动作的时候,写得就是这些小写的function名字,然后传入参数。

2:知道数据是怎么弄的,那么接下来我们是要连接redux跟react了:

2.1:就是要使用connect函数来连接:

connect函数需要传入是要融合为store的reducers,所以传进去的两个函数需要返回的是reducers

上面的那个是我们之前看到的那个rootReducer一个叫todos的reducers,里面是直接实时数据

下面的也是传入reducers,但是需要根据给进去的action指令来修改。

connect是一个高阶函数,首先传入mapStateToProps、mapDispatchToProps,然后返回一个生产

Component

的函数(wrapWithConnect),然后再将真正的Component作为参数传入wrapWithConnect(MyComponent),这样就生产出一个经过包裹的Connect组件,该组件具有如下特点:

通过this.context获取祖先Component的store

props包括stateProps、dispatchProps、parentProps,合并在一起得到

nextState ,作为props传给真正的Component

componentDidMount时,添加事件this.store.subscribe(this.handleChange),实现页面交互

shouldComponentUpdate时判断是否有避免进行渲染,提升页面性能,并得到nextState

componentWillUnmount时移除注册的事件this.handleChange

在非生产环境下,带有热重载功能

2.2:最后在index里面组装好App这个主组件跟其他组件的关系,用redux连接起来:

而因为我们需要做一个过渡动画,所以在App这个组件里面,我们需要:

要加载的模块有:

PubSub的话,是一个提供可以在不同模块中还能保持读取的变量的模块。

最后是index.html里面在什么地方渲染这些组件:

3:接下来就很简单地去实现自己要做的构建页面了:

就是不停地把props跟action从父组件传到子组件里面使用:

例如,我们在最大的store里面传入其中的一个BannerDetail组件里面:

我们改变state只能通过setState来改变,然后就会产生实时的变化。

通过对传入的props来对数据进行改变(this.props.actions)和读取(this.props.todos)

这是对当面组件里面添加动作时候的写法,假如组件里面,还要添加小组件的写法是:

而在EditFolderName组件里面的代码是:

就是这样传入进行处理,跟父组件进行交互就可以了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容