React只负责UI层,也就是我们通常在MVC框架中 所说的View层,所以在使用React开发中 我们得引入Redux

负责Model

一开始学习Redux的中间层 有点 摸不到头,

其实只要你注意观察,这个所谓的middlerware其实就是一个 责任链

import { applyMiddleware, createStore } from "redux";

const reducer = (initialState=0, action) => {
if (action.type === "INC") {
return initialState + 1;
} else if (action.type === "DEC") {
return initialState - 1;
} else if (action.type === "MULT") {
throw new Error("AHHHH!!");
}
return initialState;
} const logger = (store) => (next) => (action) => {
console.log("Logged", action);
return next(action);//打印action 然后将调用 next函数 将action对象 交给 责任链上的下一个处理函数
}; const errorHandler = (store) => (next) => (action) => {
try {
return next(action);//同上,先try catch 然后把action对象 交给责任链上的下一个处理函数
} catch(e) {
console.log("ERROR!", e);
}
}; const middleware = applyMiddleware(
logger,
errorHandler
)
const store = createStore(reducer, middleware) store.subscribe(() => {
console.log("store changed", store.getState());
}) store.dispatch({type: "INC"})
store.dispatch({type: "INC"})
store.dispatch({type: "INC"})
store.dispatch({type: "DEC"})
store.dispatch({type: "DEC"})
store.dispatch({type: "DEC"})
store.dispatch({type: "MULT"})
store.dispatch({type: "DEC"})

-------------

下面是异步IO的责任链设计

import { applyMiddleware, createStore } from "redux";
import axios from "axios";
import logger from "redux-logger";
import thunk from "redux-thunk";
import promise from "redux-promise-middleware"; const initialState = {
fetching: false,
fetched: false,
users: [],
error: null,
}; const reducer = (state=initialState, action) => {
switch (action.type) {
case "FETCH_USERS_PENDING": {
return {...state, fetching: true}
break;
}
case "FETCH_USERS_REJECTED": {
return {...state, fetching: false, error: action.payload}
break;
}
case "FETCH_USERS_FULFILLED": {
return {
...state,
fetching: false,
fetched: true,
users: action.payload,
}
break;
}
}
return state
} const middleware = applyMiddleware(promise(), thunk, logger())
//这里加入了thunk promise() logger()
//都是责任链上的某一个环节,promise 负责异步IO 返回的时候 ,
//再一次重新调用dispatch函数,并修改type类型为 FETCH_USERS_PENDING 等情况 本质上就是在我们的type类型上 根据异步IO返回的结果 再一次添加了PENDING等状态 然后再调用dispatch函数分发action
const store = createStore(reducer, middleware) store.dispatch({
type: "FETCH_USERS",
payload: axios.get("http://rest.learncode.academy/api/wstern/users")
})

reference:

Connecting React & Redux - Redux Tutorial  youtube.com

reactjs 阮一峰 http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

redux的中间层 --reactjs学习的更多相关文章

  1. ReactJS 学习路线

    Node.js: 推荐采用nvm的方式安装,nvm(Node Version Manager)用于Node的版本管理,方便不同版本的Node之间的切换 安装npm,npm(Node Package M ...

  2. reactjs学习一(环境搭配react+es6+webpack热部署)

    reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study   或者使 ...

  3. ReactJS学习 相关网站

    React 入门实例教程-阮一峰 http://www.ruanyifeng.com/blog/2015/03/react.html汇智网-React 互动学习http://hubwiz.com/co ...

  4. Redux和react-redux的学习总结

    写在最前面:这段时间一直在看前端方面的东西,之前只是了解HTML,CSS,JS,jQuery,由于公司交代了前端的任务,所以后面又看了Bootstrap,React,Redux,react-redux ...

  5. reactjs学习之路

    正式开始react的学习 1.react中组件的首字母如果是大写就会当成自定义组件,如果是小写就会当成DOM的自带元素名.如果你自定义组件名称首字母是小写不会报错,但是无法显示. 2.自定义组件的re ...

  6. ReactJS学习笔记(三)

    需要注意的问题: 1.组件名称开头字母一定要大写.(PS:原因是 React 的 JSX 里约定分别使用首字母大.小写来区分本地组件的类和 HTML 标签.) 2.this.props.childre ...

  7. ReactJS学习笔记(二)

    1.Ajax: componentDidMount 方法设置 Ajax 请求,等到请求成功,再用 this.setState 方法重新渲染 UI. /*demo1*/ var Demo1Box=Rea ...

  8. ReactJS学习笔记(一)

    1.依赖的资源: <script type="text/javascript" src='../asset/react.js'></script>   &l ...

  9. reactjs 学习笔记

    1.安装 npm install -g create-react-app create-react-app my-app cd my-app npm start

随机推荐

  1. 使用SQLServer同义词和SQL邮件,解决发布订阅中订阅库丢失数据的问题

    最近给客户做了基于SQLServer的发布订阅的“读写分离”功能,但是某些表数据很大,经常发生某几条数据丢失的问题,导致订阅无法继续进行.但是每次发现问题重新做一次发布订阅又非常消耗时间,所以还得根据 ...

  2. hexo博客进阶-相册和独立域名

    之前我已经写了一篇文章详细的讲述了如何使用hexo搭建github博客.如果还没有看的可以去看看,hexo搭建博客 其实,根据这篇文章的过程我们就能够搭建一个专属于自己,并且非常美观的博客了.但是如果 ...

  3. 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(一)GIS一张图的系统开发环境以及flexviewer框架

    系统的GIS功能实现是基于arcgis api for flex,首先附上系统的主界面图,接下来的是对主界面的模块功能详细讲解: 一.GIS环境软件安装 (1)arcgis desktop的安装,要是 ...

  4. SharePoint 2013 必备组件之 Windows Server AppFabric 安装错误

    1.如下图,在使用SharePoint2013产品准备工具的时候,网上下载安装Windows Server AppFabric的时候,报错,点击完成重启计算机,重新安装依然报错. 2.无奈之下,只有选 ...

  5. Wireshark查看https的通讯

    如果有服务端的证书,那我们可以分析web下https的通讯情况,在特别的场景下有一定的用处,如外部审计 如下是在wireshark或tshark中配置查看https的设置 wireshark验证 ts ...

  6. cocos2dx骨骼动画Armature源码分析(一)

    源码分析一body { font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.6; padding-to ...

  7. 使用私有Pod Spec的类库--提高公司开发效率

    前言 找了这么长时间,再次开始去尝试Cocoapods了.前面已经写过一篇关于如何把自己的Github上的代码库添加Cocoapods支持.现在就让我们看一下如果搭建私有的Spec吧. 之所以构建私有 ...

  8. 【代码笔记】iOS-替换电话号码中间4位为-号

    一,效果图. 二,代码. RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional se ...

  9. Linux查看设置系统时区

    关于时区的概念,其实初中地理课已经涉及,很多人都多少了解一些,可能只是细节搞不太清楚.为什么会将地球分为不同时区呢?因为地球总是自西向东自转,东边总比西边先看到太阳,东边的时间也总比西边的早.东边时刻 ...

  10. 使用强大的可视化工具redislive来监控我们的redis,别让自己死的太惨~~~

    作为玩windows的码农,在centos上面装点东西,真的会崩溃的要死,,,我想大家也知道,在centos上面,你下载的是各种源代码,需要自己编译...而 使用yum的话,这个吊软件包有点想nuge ...