翻译 | Thingking in Redux(如果你只了解MVC)

作者:珂珂(沪江前端开发工程师) 本文原创,转载请注明作者及出处。 原文地址:https://hackernoon.com/thinking-in-redux-when-all-youve-known-is-mvc-c78a74d35133#.u2jqlinjn

当我们在Spoil打算推出我们自己的移动端应用时,头一个需要作出的决定就是:我们应该使用哪种编程语言?经过一番讨论,我们最终做出的决定是:React-Native。学习一门新的“语言”或者框架并不是个大问题,但是老兄我得告诉你,React-Native和Redux确确实实是块难啃的骨头。这篇文章没有介绍React-Native是如何工作的(因为那确实不是最难的部分)。下面几段文字的目的在于帮助任何人完成从“Thingking in MVC”到“Thinking in Redux”的转换。希望能对你有所帮助。

React-Natvie 和 Redux?

一旦你开始学习React-Natvie(或React),在有人向你提及Redux之前,你大概只落后了3个stack overflow的问题,或者medium.com上几篇博客的距离。

你当然很高兴了。你开始理解state和props的区别了,你知道了componentDidMount是干啥的了,你甚至懂得了怎样合理地创建一个可复用组件。但是忽然间,你发现自己到了egghead.io网站上,这里的一些家伙正讨论着stores、reducer compositions、action,还有将state映射到props。

你同时也意识到,之前你可以这么做:

$(“.my-button”).click();

让一个按钮干点什么;现在?3个小时可能你的一个按钮啥也干不了。

作一些类比

如果你是从MVC(或者MVVC)的世界过来的,你习惯了使用models,views和controllers。但是在Redux中,我们用actions、reducers、stores和components来解决问题。从MVC“迁移”到Redux是比较困难,但这里是我的做法:

Actions = Controller

把你的Actions想象成controller。无论何时你想让你的App产生一些活动的时候(比如:载入数据、将isLoading标志从true变为false等等),那么你需要分发一个action。就像在MVC中,你需要调用一个controller。

Reducer = Model

某种程度上吧。你的reducers将会掌管应用程序的当前状态(比如: 用户信息、api载入的数据、需要展示的数据)。当一个action被调用时,reducer来决定需要做些什么。在MVC中你可能有一个带setName()方法的model,在Redux中,你将会有一个reducer,它负责处理一个action,并将name设置到state中去。

特别感谢 Prabin Varma*。将store讲的更生动形象。

Stores = ???

store在Redux中很特别,在MVC中难以找和它等价的东西。但是不用担心。store是深藏在幕后被小心保管的东西,就像是一个容器,存储了所有为state服务的reducer集合。它有一个方法来获得当前的状态,并且暴露出方法来订阅state的变动(使用“connect()”方法)。这就是Redux允许你调用action,并能将它们像props一样传入组件的秘密了。

Components = Views

组件是有些类似于你的智能视图。它们负责展示你从state中拿到的信息。我建议将你的组件分为两部分:一部分只是作为展示部分(木偶组件),另一部分负责处理所有的action和state变更(智能组件)。

从MVC思想转换至Redux思想

MVC和Redux之间一个主要的不同点就是:MVC中的数据能够双向流动,但在Redux中,数据被限制为只能单向流动。

经典MVC。那时的人生还没有如此艰难。

如你所见(以及从经验中了解到的)在上面的图表中,数据能够双向流动。你在view层按下了一个button,它会向你的controller发送一个信息,导致model的更新。model改变了一些值,并将值返还给controller,然后controller刷新了view。灰常简单!

Redux数据流。人生变得糟透了。

在Redux中事情有些不同。假如你有一个组件,然后你想在按钮被按下的时候做些事情。那么你该从何开始呢?我是这么做的:

  1. 定义你的Action
  2. 定义你的Reducer
  3. 在你的Component中将Actions像props一样定义
  4. 把它们放到View上

下面是个解释以上概念的简单代码示例。在这个例子中,我将会展示如何编辑一个text input,然后当有用户按下按键时它将会调用action来保存内容。

首先,从Action文件开始

export const MODIFY_NAME = "MODIFY_NAME";
export const SAVE_NAME = "SAVE_NAME";

/**
* 这是当用户按下按键的时候,我们从组件上所调用的action。
用户每输入一个字符,都会带着input中新的value值去调用这个action。
注意函数中的type和payload字段,我们将在reducer中用到它们,去用新的value值“修改”我们的model。
**/export function modifyName(name){    return {
        type: MODIFY_NAME,
        payload:{
            name
        }
    }
}

/**
这是当用户按下保存姓名按钮的时候,我们从组件上所调用的action。
注意我们是如何将value传入的。这么做是因为reducer已经持有了该value值。
另外,这里也没有payload。这么做的原因是因为reducer并不需要。在reducer那一步中,不需要额外的信息。
同时,一般这么做将调用一个api终端以及诸如此类的东西,但是为了简洁,我没有将其包含进来。
**/export function saveName(){ return{
   type: SAVE_NAME
 }
}

现在看我们的Reducer。总的来说,reducer需要处理传入的actions。

// 导入我们早先定义好的actions文件
import * as constants from '../actions.js';

/** 
初始状态被用来定义你的reducer。
通常你将会把它设置为默认值和空字符串。需要这么做的理由是,当要使用这些值的时候,你至少保证它们有一个默认值。把它当做一个默认构造器吧。
**/const initialState = {
     name:'',
     isSaved: false
}

/**
这个reducer是负责“监听”输出的action。我们早些定义的saveName和modifyName函数,将会在这里被调用。action参数则是上面函数中定义的将要被return出来的值(type和payload)。
**/function reducer(state=initialState,action){  switch (action.type){/**
在Redux中state是不可变的。你必须时刻返回一个新的,所以这里使用ES6的展开运算符将传入的state中的值拷贝过来。
**/
    case constants.MODIFY_NAME:       return {
         ...state, 
         name:action.payload.name
      }     case constants.SAVE_NAME:       return {
           ...state, 
           isSaved:!state.isSaved
       }
   }
}
export default name;

注意到constants.MODIFY_NAME 和 constants.SAVE_NAME 是如何与我们在action中将要返回出来的对象的type字段对应上的。正是以这种方式,reducer才能得知action的身份。

现在来定义我们的“智能”组件。这意味着这个组件将会定义所有对action的调用。

/** App首页 **/
‘use strict’;

import React, { Component } from ‘react’;
import { connect } from ‘react-redux’;
import Name from ‘./presentational/Name’;
import * as actions from ‘./actions/name’;

/**
实际的值(name和isSaved)和调用action所需的function都以props的形式传入。**/
class NameContainer extends Component {
 render() {
   return (
       <Name 
      name = {this.props.name} 
      isSaved = {this.props.isSaved}
      modifyName = {this.props.modifyName} 
      saveName = {this.props.saveName}
     />
   );
 }
}

/**
这么做是为了得到reducer中保存的值,并且把它们返回给component。这样我们才能通过this.props来调用它们
**/

const mapStateToProps = (state,ownProps) =>{
/**
使用Redux的stores,它允许我们仅仅通过state.name来获得reducer中的值。注意name是如何通过reducer导出的。
**/
const { name, isSaved } = state.name; 
return {name,isSaved };
}

/**
在mapStateToProps函数中,我们将state中的变量映射成property来传入我们的展示组件。在mapDispatchToProps函数中,我们将action处理函数映射到我们的容器,这样我们就能将它们传入到展示组件中去了。
**/

const mapDispatchToProps = (dispatch) => { return {
 modifyName:(name)=>{
  dispatch(actions.modifyName(name))
 },
 saveName:()=>{
 dispatch(actions.saveName())
 },
}

/**
如你所见,我们能够将函数和变量以props的方式传入我们的容器全依赖于此。是react-redux中的connect函数神奇的实现了这些功能。
**/
export default connect(mapStateToProps,mapDispatchToProps)(NameContainer);

现在到了最简单的部分,创建一个与用户交互的展示组件(MVC里的V)。

/**
 *
木偶组件将会使用传入的props,这些是用户的行为在智能组件上产生的数据
 */‘use strict’;
import React, { Component } from ‘react’;
import {Text,TextInput, TouchableOpacity} from ‘react-native’;
import { Actions, ActionConst } from ‘react-native-router-flux’;

class Name extends Component
render() { return ( <View>

 <TextInput
 multiline={false}
 //from the component above
 value={this.props.name}
 placeholder=”Full Name”
 //from the component above
 onChangeText={(name)=>this.props.modifyName(name)}
 />  

<TouchableOpacity onPress= {()=>{this.props.saveName()}>
     <Text>Save</Text>
  </TouchableOpacity>
 </View>
 );
 }
}
export default Name;

就是这样了!虽然你仍然需要做一些基础的的模版设置填充,但是我希望这解释清楚了如何以redux的方式进行思考。

有些问题曾经让我掉到坑里一段时间(比如:信息传到了哪?怎么传的),因此我希望节省你们的时间,减轻你们的头疼。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Debian社区

Debian 环境下有趣的命令

安装  $ sudo apt-get install sl 运行  $ /usr/games/sl

1255
来自专栏web前端教室

学点vue.js的东西,什么都得学点,面试时说不定对方会问什么

说vue呢也是关注视图层的框架,它嫌react太绕了,redux太麻烦了,然后就说自己很简单,说自己还有双向绑定,好的很,不是小好,是大好。那我今天就写点vue...

1928
来自专栏大数据挖掘DT机器学习

数据挖掘工程师:如何通过百度地图API抓取建筑物周边位置、房价信息

1.需求描述 对于数据挖掘工程师来说,有时候需要抓取地理位置信息,比如统计房子周边基础设施信息,比如医院、公交车站、写字楼、地铁站、商场等,一般的爬虫可以采用...

4519
来自专栏前端架构与工程

《微信小程序七日谈》- 第一天:人生若只如初见

《微信小程序七日谈》系列文章: 本系列的文章并非初学教程,而是笔者在具体开发过程中遇到的问题以及部分解决方案。 微信小程序自公布以来就被捧上了天,新闻一波接一...

1988
来自专栏武军超python专栏

2018年8月6日初次写飞机大战的总结

ubuntu中安装pygame的步骤: 先安装pip3: apt-get install pip3 再安装pygame: pip3 install p...

1173
来自专栏牛客网

19实习腾讯前端面经

我是填的部门是IEG,不过捞起我简历的是SNG。Anyway,现在到HR面了。希望一切顺利吧~ 现在来回馈牛客网啦。 腾讯 2018.03.17 一面 (内推)...

4699
来自专栏程序员的碎碎念

利用Ajax提升网页渲染速度——以Highcharts为例

先来看看速度优化对比(这里用了 Django的 DebugToolbar库来查看状态)

993
来自专栏程序员的碎碎念

Layer弹层组件

前几天了解到这个不错的弹层插件,样式好看,用起来也方便。喜欢的人看完我的博客也可以看官方网站哦:http://www.layui.com 在这个官方网站里有关于...

3835
来自专栏漫漫前端路

Vue 2.3、2.4 知识点小结

2.3 参考 github.com/vuejs/vue/r… 2.4 参考 github.com/vuejs/vue/r… 实例 demo 地址:github....

2282
来自专栏代码GG之家

Android 关机对话框概率没有阴影故障分析

Android 关机对话框概率没有阴影故障分析 ? 以玩的心态,做着感兴趣的事情而已,别无其他杂念。 android recent key长按事件弹起触发最近列...

2276

扫码关注云+社区