翻译 | 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 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

网易云课堂Excel课程爬虫思路

由于即将毕业,马上进入职场,想来是时候需要巩固一下基本职场技能了,特别是Excel这种杀手级职场应用。 可是如今网络这么发达,到处都充斥着Excel课程、视频...

3555
来自专栏Crossin的编程教室

【我问 Crossin】英语不好能不能学编程?

“我问 Crossin” 栏目会整理一些读者经常会问到的问题,统一作答。有比较具体的编程细节,也会有一些方向的建议,以及学习经验、编程小技巧的分享。 大家有想问...

3209
来自专栏禁心尽力

SpringMVC注解@RequestMapping之produces属性导致的406错误

       废话不多说,各位,直接看图说话,敢吗?这个问题网上解决的办法写的狠是粗糙,甚至说这次我干掉它完全是靠巧合,但是也不否认网上针对406错误给出的解决...

2076
来自专栏程序员的SOD蜜

.NET ORM 的 “SOD蜜”--零基础入门篇

PDF.NET SOD框架不仅仅是一个ORM,但是它的ORM功能是独具特色的,我在博客中已经多次介绍,但都是原理性的,可能不少初学的朋友还是觉得复杂,其实,SO...

2637
来自专栏熊二哥

React快速入门

正好旁边前端的兄弟最近在学习React,为了更深入的了解前端的业态,也果断来学习一发,目标是有个基础的了解,需要时能快速上手就OK,说实话,个人并不是很喜欢它的...

1948
来自专栏喵了个咪的博客空间

phalcon-进阶篇1(过滤与清理)

#phalcon-进阶篇1(过滤与清理)# ? 本教程基于phalcon2.0.9版本 ##前言## 先在这里感谢各位phalcon技术爱好者,我们提供这样一个...

2738
来自专栏沈唁志

你认为该怎么样学习PHP?PHP成长之路

1995
来自专栏web编程技术分享

用jQuery 动画函数 animate 模拟豌豆发射

2859
来自专栏编舟记

一个Java中操作字符串的类库 (Underscore.string.java)

underscore.string.java 是一个Java中方便操作字符串的类库,提供了众多帮助方法。

602
来自专栏开源项目

码云推荐 | 基于 ActiveRecord 模式的 ORM 框架 Hare

hare是一个基于pymysql并运用 ActiveRecord 模式的 ORM 框架。 项目简介 hare是一个基于pymysql并运用ActiveRecor...

2956

扫码关注云+社区