react + redux开发

react本身是组件化的,它的初衷只是提供一个UI库,但是在ES6以及webpack的大环境下,react本身已经形成了一整套全新的技术栈:
react: 提供视图模块
react-router: 提供视图路由切换,配合后端路由,可以开发比较强势的单页应用。
redux: 提供程序的数据状态管理机制。本身与react并没有直接联系,但是配合react可以更好地发挥react的作用。
webpack: 对react的jsx语法以及es6语法进行编译、对程序进行打包等等。
如果用react + redux开发一个todo程序,实现的步骤和难度会比使用angular要麻烦得多。但是从中可以学习到一些新的思想。

redux

redux本身的学习,基本只要记住它的三个东西:actionreducerdispatch

action

action描述的是一个最基本的动作。它返回一个对象,这个对象的属性里至少包含一个type属性,用来描述动作的行为标识,另外的各种属性则可以作为这个动作所携带的数据变化。
比如:

    const addItem = (text) => {
          return {
              type: 'ADD_ITEM',
              text
          }  
    }

这个函数就是一个action函数,它的动作类型是ADD_ITEM,动作携带的数据是函数传递进来的参数text
注意: 这里的action是一个函数,这是因为redux的dispatch风格实际上是一种函数式编程风格。

reducer

reducer也是一个函数,它用来描述一个action动作,会给程序的state带来怎样的变化。这个函数通常用一些switch语句来描述不同的action所改变的不同state。
比如:

    const Todo = (state = [], action) => {
            switch (action.type): {
                case: 'ADD_ITEM':
                return [
                  ...state,
                  {action.text}
                ]
                break;
                default:
                return state;
                break;  
            }
    }

注意:
reducer中的state一般会给一个默认值,然后就是一个原则:永远不要修改state本身的任何值。所以在上面的ADD_ITEM中,采用了ES6的数组继承的写法[...state, v]。如果state的表现形式是一个对象,那么就应该采用Object.assign的写法。
如果有多个reducer函数,则可以通过combineReducers函数将这一堆reducer给组合起来。

    const App = combineReducers({Todo})

dispatch

dispatch相当于事件触发,上面的reducers使用combineReducers组合完毕后,就可以使用redux的store了。

      let store = createStore(App);
      let unsubscribe = store.subscribe(() => {console.log(store.getState())});
      store.dispatch(addItem('hello redux'));
      unsubscribe();

使用createStore创建了程序的状态树,通过storesubscribe方法实现了sub/pub模式,并返回一个取消订阅的函数,这里用unsbuscribe变量接收。使用dispatch函数来触发action,改变state的当前状态。调用store.getState来获取程序的当前状态。直接调用unsubscribe()来取消订阅。
注意:唯一能够改变state状态的方法,就是触发action。这样的设计保证了程序状态的可控性和可预测性。

react-redux

react-redux是一个配合react使用的redux npm模块。在redux本身的基础上,提供了一个connect中间件,把react的UI与redux的数据结合了起来。
也就是说,react将更加专注地做自己的UI组件部分,redux则专注自己的数据部分,然后在传统的react component组件之外,新增了一个container组件。
react component只做自己的UI展示与逻辑,并不关心内部的props如何变化,也不知道传入自己的值是什么(但是可以通过PropTypes来规范传入值的数据类型)。
containers 组件则是先创建两个函数,一个是mapStateToProps,另一个是mapDispatchToProps,这两个方法会把reduxstatedispatch函数转化成reactprops,并且一切的数据操作都会由redux内部去管理和实现,然后通过react-reduxconnect方法,把redux的数据与react的组件结合起来。

    connect(mapStateToProps, mapDispatchToProps)(App);

上述的各种操作都是以函数为单位的,最为典型的就是connect函数,它接收两个函数作为参数,并且返回一个函数,这个返回的函数又是以函数作为参数的。所以这种函数编程的写法需要理解和习惯。毕竟JavaScript天生就是适合函数式编程的。

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

推荐阅读更多精彩内容