一个简单的例子让你了解React-Redux

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

一个简单的例子让你了解React-Redux - 小平果的欢乐谷
- 博客频道 - CSDN.NET

小平果的欢乐谷

你的到来会让我很意外，谢谢光临！

【活动】2017 CSDN博客专栏评选

&nbsp

【5月书讯】流畅的Python，终于等到你！
   &nbsp

CSDN日报20170517 ——《怎样和虐死人的老项目谈恋爱》

一个简单的例子让你了解React-Redux

标签：
前端reactreduxreact-redu

2017-05-19 00:55
55人阅读
评论(0)
收藏
举报

本文章已收录于：

.embody{
padding:10px 10px 10px;
margin:0 -20px;
border-bottom:solid 1px #ededed;
}
.embody_b{
margin:0 ;
padding:10px 0;
}
.embody .embody_t,.embody .embody_c{
display: inline-block;
margin-right:10px;
}
.embody_t{
font-size: 12px;
color:#999;
}
.embody_c{
font-size: 12px;
}
.embody_c img,.embody_c em{
display: inline-block;
vertical-align: middle;
}
.embody_c img{
width:30px;
height:30px;
}
.embody_c em{
margin: 0 20px 0 10px;
color:#333;
font-style: normal;
}


分类：

React（1）

作者同类文章X

版权声明：本文为小平果原创文章，转载请注明：http://blog.csdn.net/i10630226

1. (单向)数据流

数据流是我们的行为与响应的抽象；使用数据流能帮我们明确了行为对应的响应，这和react的状态可预测的思想是不谋而合的。

常见的数据流框架有Flux/reFlux/Redux。相比其它数据流框架，Redux轻量(压缩后只有2K),而且在一个react项目中，Redux维护了单一的状态树。

下面我们来具体看看为什么要使用数据流

不只是前端，很多系统开发的时候遵从的都是MVC分离，也就是数据放在Model里面，View来控制显示，Controler做整体的管理。但是随着系统的庞大，它会产生一系列问题。比如举个例子，我们上网shopping，提交订单，那么用户的账号，优惠信息，物流信息，库存等等的Model都会发生更新变化，然后View上的显示也会随之变化，反过来，View的有些变化也会对Model产生影响，这样就使用户下了一个订单以后界面会变得什么样变得不可预测。

所以在React出现的同时Facebook也搞出了一个Flux数据流(React是纯V层框架，需要数据流进行支撑)，它的思想如下:

它认为用户有各种各样的Action,然后所有的Action由一个统一的Dispacher分发到若干个Store里去，这个Store保存着数据也保存着页面的状态，根据数据和页面的状态，一个store只能向视图层传递信息，而不允许视图层再返回来作用到Store上，然后视图就发生更新，然后再由用户传入新的操作。这样子我们就能预测到Action作用到Store上时，View发生什么变化。

那Redux是Flux的一种实现方法，但是也有些许不一样，它的思想如下

当页面渲染完，UI就出现了，然后用户触发UI上的Action，然后Action被送到Reducer这个方法里去，然后Reducer更新了Store，Store里包含react开发的State，最后State决定UI层的展现。这就是Redux的一个完整过程。

2. React 的一些简单回顾

3.react-redux 介绍

react-redux安装:

npm install react-redux redux

redux本身就是一个工具流，而react-redux则是对redux的绑定。类似的还有ng2-redux、backbone-redux等

4. 直接开撸代码

项目结构

四个重要的文件夹：

– actions：行为

– components：组件

– container：容器组件

– reducer：Store里分发Action的方法

  • index.html：模板文件
  • server.js
  • webpack

下面对各个部分进行举例（一个简单的待办项小demo）：

action:(1.是行为的抽象；2.是普通JS对象；3.一般由方法生成；4.必须有一个type)

const addTodo = (text) = > {
  return {
    type: ‘ADD_TODO‘,  //必须要有type
    id: nextTodoId++,
    text
  }
}

reducer:(1.是响应的抽象；2.纯方法（非存方法是指比如依赖当前的时间）)

/* 传入旧的state和作用的action返回一个新state */
const todo = (state, action) => {
  switch (action.type) {
    case ‘ADD_TODO‘:
       return {
          id: action.id,
          text: action.text,
          completed: false    // 刚传入的待办项未完成
       }
     case ‘TOGGLE_TODO‘:
       if (state.id !== action.id) {
         return state
       }
       return Object.assign({}, state, {  // 把state和completed合并成一个对象返回
          completed: !state.completed
       })
     default:
        return state
  }
}

store:（reducer和state的集合）

  • 1.action作用于store；
  • 2.reducer根据store响应；
  • 3.对于redux来说，store是唯一的；
  • 4.store包括了完整的state；
  • 5.state完全可预测
import { createStore } from ‘redux‘
import todoApp from ‘./reducers‘

let store = createStore(todoApp)

打印store：

组件：

redux 并不知道 component组件的存在，而只知道container组件的存在，所以数据流从redux流入 container组件，container在通过 props传参的形式，传入component组件。

一般来说componet组件是如何显示，比较容易复用，而container却是和我们的业务联系比较紧密，不容易复用。

项目demo代码:https://github.com/guopingxiao/weber-study-demos/tree/master/06react/react-redux-todos-master

时间： 2024-10-14 12:01:32

一个简单的例子让你了解React-Redux的相关文章

Android Handler的一个简单使用例子

在前面 开启一个线程Thread并用进度条显示进度 这篇文章里,我们用线程实现了这么一个简单的功能,就是点击按钮,加载进度条.但是有没有发现,点击一次之后,再次点击就会没效.我们可是需要每次点击都要显示下一张图片的.永盈会娱乐城 这里就需要引入 Android 的消息机制了,简单来说,就是 Handler.Looper 还有 Message Queue的使用.这里我们用一个简单的例子来说明 Handler 的使用,就是每次点击按钮,给消息队列发送一个数字 5.还是在 PaintingActivi

【Python】一个简单的例子

问题描述: Python基础篇 参考资料: (1)http://www.cnblogs.com/octobershiner/archive/2012/12/04/2801670.html (2)http://www.cnblogs.com/itech/archive/2010/06/20/1760345.html 例子: 求解Fibonacci glb_var.py gl_count=1 path.py # coding:utf-8 ''' Created on 2014-4-28 @autho

关于apriori算法的一个简单的例子

apriori算法是关联规则挖掘中很基础也很经典的一个算法,我认为很多教程出现大堆的公式不是很适合一个初学者理解.因此,本文列举一个简单的例子来演示下apriori算法的整个步骤. 下面这个表格是代表一个事务数据库D,其中最小支持度为50%,最小置信度为70%,求事务数据库中的频繁关联规则. Tid 项目集 1  面包,牛奶,啤酒,尿布 2  面包,牛奶,啤酒 3  啤酒,尿布 4  面包,牛奶,花生 apriori算法的步骤如下所示: (1)生成候选频繁1-项目集C1={{面包},{牛奶},{

Linux内核中的信号机制--一个简单的例子【转】

本文转载自:http://blog.csdn.net/ce123_zhouwei/article/details/8562958 Linux内核中的信号机制--一个简单的例子 Author:ce123(http://blog.csdn.NET/ce123) 信号机制是类UNIX系统中的一种重要的进程间通信手段之一.我们经常使用信号来向一个进程发送一个简短的消息.例如:假设我们启动一个进程通过socket读取远程主机发送过来的网络数据包,此时由于网络因素当前主机还没有收到相应的数据,当前进程被设置

duilib DirectUI库里面的一个简单的例子RichListDemo

http://blog.csdn.net/zengraoli/article/details/9993153 2013-08-16 00:08 3289人阅读 评论(2) 收藏 举报 目录(?)[+] 1.首先来看这里的CRichListWnd 已经不再是从CWindowWnd继承了 classCRichListWnd:publicWindowImplBase 从WindowImplBase中,可以看到有三个抽象函数: virtualCDuiStringGetSkinFolder()=0; vi

一个简单的例子搞懂ES6之Promise

ES5中实现异步的常见方式不外乎以下几种: 1. 回调函数 2. 事件驱动 2. 自定义事件(根本上原理同事件驱动相同) 而ES6中的Promise的出现就使得异步变得非常简单.promise中的异步是这样的: * 每当我需要执行一次异步操作的时候,我都需要new一个promise对象 * 每一个异步操作的Promise对象都需要设定一个成功执行的条件和成功的回调.一个失败的条件和失败的回调 * Promise对象可通过执行then()方法获得成功的回调信息 * Promise对象可通过执行ca

020: class, objects and instance: 一个简单的例子，压缩文件中内容的替换

这个例子是对前面学习的知道的一个简单总结. 在设计类的时候,并非所有的类都是埋头干活的类,同时也需要有很多类似于管理的类,这样的类的功能就是调用其他的类来共同的完成任务. import sys import os import shutil import zipfile class ZipReplace(object): def __init__(self, file_name, search_string, replace_string): self.file_name = file_name

socket编程——一个简单的例子（转）

原文地址:http://blog.csdn.net/wind19/article/details/6156339 从一个简单的使用TCP例子开始socket编程,其基本步骤如下: server                                                  client +++++++                                          ++++++++ 创建socket                               

socket编程——一个简单的例子

从一个简单的使用TCP例子开始socket编程,其基本步骤如下: server                                                  client +++++++                                          ++++++++ 创建socket                                          创建socket +++++++