redux什么的都用起来,redux的中间件的利用

作者: 韦德国际1946国际网址  发布:2019-05-28

用过react的同窗都知情在redux的留存,redux正是一种前端用来囤积数据的库房,并对改储藏室进行增加和删除改查操作的1种框架,它不但适用于react,也使用于其余前端框架。研讨过redux源码的人都觉着该源码很精致,而本博文就本着redux中对中间件的拍卖进行介绍。

当代web页面里随地都以ajax,所以拍卖好异步的代码特别首要。

react redux的入门级demo

分类:

在讲redux中间件之前,先用两张图来大约介绍一下redux的基本原理:

此番本身再也选了个最契合呈现异步管理的施用场景——搜索音信列表。由于有现有的接口,大家就不要自个儿搭服务了。 我在网络随意搜到了2个情报服务接口,匡助jsonp,就用它吗。

概述

初阶熟练react 和 redux 的一个demo,分界面异常粗糙

轻巧易行的一个商品列表和投入购物车,从购物车删除等效果,权且并未有提到到接口

根本是轻车熟路redux的主干使用。

redux相关的剧情笔者都位于store 的目录里面,因为比较熟习vue,所以也按vue的思路去成立目录

塑造筑工程具使用webpack

  • JavaScript

图片 1

壹开头,我们依旧比照action->reducer->components的种种把基本的代码写出来。先想好要怎么样效果, 作者设想的正是有一个输入框,旁边一个追寻开关,输加入关贸总协定组织键字后一点按键相关的情报列表就展现出来了。

目录结构

--src
    |--css
    |--img
    |--js
        |--api   //没有用到接口
        |--components  //公用组件
        |--containers  //容器,在容器里可以将需要用到的state和action 传到组件
        |--router  //路由
        |--store
            |--actions 
            |--reducers  //这里我是重reducers ,将相关的处理逻辑写在reducers里面
            |--actionTypes  //就跟vue里面的mutation.js 差不多
    |--main.js //入口文件       

全体来讲,从入门的景况看,笔者个人认为vue相对会相比协和一点

Redux 入门教程(2):中间件与异步操作

上1篇文章,小编介绍了 Redux 的基本做法:用户产生 Action,Reducer 函数算出新的 State,View 重新渲染。

图片 2

image

不过,一个关键难点未有化解:异步操作怎么做?Action 发出以往,Reducer 立刻算出 State,那叫做同步;Action 发出现在,过一段时间再执行Reducer,那正是异步。

怎么才具 Reducer 在异步操作结束后自动执可以吗?这就要动用新的工具:中间件(middleware)。

图片 3

image

图中就是redux的中坚流程,这里就不细说。

率先是action,以往能想到的动作便是把音信列表放到旅社里,至于列表数据是哪里来的说话加以。 来看src/actions/news.js:

demo展示

图片 4

一、中间件的定义

为了知道中间件,让我们站在框架小编的角度思索难题:假若要增添效果,你会在哪些环节加上?

(一)Reducer:纯函数,只承担总括 State 的效率,不合适承担其余功效,也负责不了,因为理论上,纯函数无法开始展览读写操作。

(二)View:与 State 11对应,能够当做 State 的视觉层,也不对路承担当何职能。

(3)Action:存放数据的靶子,即音信的载体,只好被别人操作,自个儿无法张开其余操作。

想来想去,唯有发送 Action 的那么些手续,即store.dispatch()方法,能够增加效果。比释尊讲,要增进日志功用,把 Action 和 State 打字与印刷出来,可以对store.dispatch张开如下更动。

let next = store.dispatch;
store.dispatch = function dispatchAndLog(action) {
  console.log('dispatching', action);
  next(action);
  console.log('next state', store.getState());
}

上边代码中,对store.dispatch开始展览了重定义,在发送 Action 前后增加了打字与印刷效用。那正是中间件的雏形。

中间件便是多个函数,对store.dispatch主意进行了退换,在发生 Action 和实行 Reducer 那两步之间,增添了其余功能。

一般在react中不仅仅利用redux,还利用到react-redux:

import {cac} from 'utils'

export const PUSH_NEWS_LIST = 'PUSH_NEWS_LIST'
export const pushList = cac(PUSH_NEWS_LIST, 'list')

运行

//默认是 localhost:8081  可以在package.json 文件修改 
npm i && npm run dev

//上线

npm run build

二、中间件的用法

本学科不关乎什么编写中间件,因为常用的中间件都有现存的,只要引用外人写好的模块就可以。比方,上一节的日记中间件,就有现存的redux-logger模块。这里只介绍怎么利用中间件。

import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();

const store = createStore(
  reducer,
  applyMiddleware(logger)
);

下面代码中,redux-logger提供贰个生成器createLogger,能够转换日志中间件logger。然后,将它投身applyMiddleware措施之中,传入createStore格局,就到位了store.dispatch()的机能加强。

此处有两点须要留意:

(1)createStore形式基本上能用一切应用的发端状态作为参数,那样的话,applyMiddleware正是第五个参数了。

const store = createStore(
  reducer,
  initial_state,
  applyMiddleware(logger)
);

(二)中间件的主次有尊重。

const store = createStore(
  reducer,
  applyMiddleware(thunk, promise, logger)
);

地点代码中,applyMiddleware措施的八个参数,便是四其中间件。有的中间件有程序须要,使用前要查一下文书档案。比方,loggerredux什么的都用起来,redux的中间件的利用。就自然要放在最终,不然输出结果会不正确。

图片 5

接下来是reducer,没什么非常的,只要遭遇上面定义的相当action,就把数量放到相应的情状里就行了。 大家先定二个叫作news的状态,里面再包括3个子境况list。前边还要扩展作用,还恐怕会给news状态增加更加的多的子状态。 以下是src/reducers/news.js的代码:

github 地址

https://github.com/jamielhf/react-demo

三、applyMiddlewares()

来看此间,你恐怕会问,applyMiddlewares以此办法到底是干吗的?

它是 Redux 的原生方法,功能是将具有中间件组成3个数组,依次施行。下边是它的源码。

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer);
    var dispatch = store.dispatch;
    var chain = [];

    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    };
    chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch);

    return {...store, dispatch}
  }
}

地点代码中,全数中间件被放进了二个数组chain,然后嵌套试行,末了施行store.dispatch。能够看看,中间件内部(middlewareAPI)能够获得getStatedispatch那多个措施。

react-redux这里也不细说。

import {combineReducers} from 'redux';
import {cr} from '../utils'
import {PUSH_NEWS_LIST} from 'actions/news'

export default combineReducers({
  list: cr([], {
    [PUSH_NEWS_LIST](state, {list}){return list}
  })
})

4、异步操作的基本思路

知道了中间件以往,就能够拍卖异步操作了。

同步操作只要产生1种 Action 就能够,异步操作的距离是它要发出三种 Action。

  • 操作发起时的 Action
  • 操作成功时的 Action
  • 操作失利时的 Action

以向服务器抽出数据为例,三种 Action 可以有二种差别的写法。

// 写法一:名称相同,参数不同
{ type: 'FETCH_POSTS' }
{ type: 'FETCH_POSTS', status: 'error', error: 'Oops' }
{ type: 'FETCH_POSTS', status: 'success', response: { ... } }

// 写法二:名称不同
{ type: 'FETCH_POSTS_REQUEST' }
{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }
{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }

除了那个之外 Action 类别不1,异步操作的 State 也要实行退换,反映分裂的操作意况。上面是 State 的一个例证。

let state = {
  // ... 
  isFetching: true,
  didInvalidate: true,
  lastUpdated: 'xxxxxxx'
};

地点代码中,State 的性质isFetching表示是还是不是在抓取数据。didInvalidate意味着数据是不是过时,lastUpdated代表上二遍立异时间。

现行,整个异步操作的思绪就很明亮了。

  • 操作起来时,送出一个 Action,触发 State 更新为"正在操作"状态,View 重新渲染
  • 操作停止后,再送出1个 Action,触发 State 更新为"操作甘休"状态,View 再一遍重复渲染

redux中间件

最近就足以起来写组件了。那回大家要做的是个列表,也等于要有再次的东西,笔者想最棒把重复的东西单收取成2个组件以便保险和复用。 那就把一条情报抽出成二个零部件吧,它应该享有标题、公布时间、图片以及概述那些剧情。 那些组件相对是纯纯的,不用跟外界打交道,所以把它放到components目录里。src/components/NewsOverview.js:

五、redux-thunk 中间件

异步操作至少要送出八个 Action:用户触发第3个Action,这么些跟同步操作一样,未有失常态;如何技巧在操作截至时,系统自动送出第叁个Action 呢?

玄奥就在 Action Creator 之中。

class AsyncApp extends Component {
  componentDidMount() {
    const { dispatch, selectedPost } = this.props
    dispatch(fetchPosts(selectedPost))
  }

// ...

地点代码是1个异步组件的例子。加载成功后(componentDidMount方法),它送出了(dispatch主意)一个Action,向服务器供给数据 fetchPosts(selectedSubreddit)。这里的fetchPosts就是 Action Creator。

下边就是fetchPosts的代码,关键之处就在里面。

图片 6

image

const fetchPosts = postTitle => (dispatch, getState) => {
  dispatch(requestPosts(postTitle));
  return fetch(`/some/API/${postTitle}.json`)
    .then(response => response.json())
    .then(json => dispatch(receivePosts(postTitle, json)));
  };
};

// 使用方法一
store.dispatch(fetchPosts('reactjs'));
// 使用方法二
store.dispatch(fetchPosts('reactjs')).then(() =>
  console.log(store.getState())
);

下边代码中,fetchPosts是3个Action Creator(动作生成器),重返1个函数。这么些函数实践后,首发出二个Action(requestPosts(postTitle)),然后开始展览异步操作。得到结果后,先将结果转成 JSON 格式,然后再产生3个 Action( receivePosts(postTitle, json))。

地点代码中,有多少个地点须求注意。

(1)fetchPosts回到了三个函数,而平凡的 Action Creator 私下认可重回二个指标。

(二)重回的函数的参数是dispatchgetState那多个 Redux 方法,普通的 Action Creator 的参数是 Action 的剧情。

(叁)在回到的函数之中,首发出二个Action(requestPosts(postTitle)),表示操作起来。

(四)异步操作停止今后,再产生一个Action(receivePosts(postTitle, json)),表示操作截至。

那般的拍卖,就消除了全自动发送第一个 Action 的题目。不过,又带来了三个新的标题,Action 是由store.dispatch艺术发送的。而store.dispatch方法符合规律景况下,参数只好是目的,不能够是函数。

此刻,将要采用中间件redux-thunk

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducers';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  reducer,
  applyMiddleware(thunk)
);

上边代码应用redux-thunk中间件,改造store.dispatch,使得后者能够承受函数作为参数。

因而,异步操作的率先种缓和方案就是,写出3个回来函数的 Action Creator,然后选用redux-thunk中间件更改store.dispatch

相似情状下,redux是不持有管理异步请求的力量,稚嫩调换过直接或然加上中间件的形式,坚实了对dispatch的力量,是的redux具有异步的力量;

import React from 'react';

class NewsOverview extends React.Component {
  render(){
    let date = new Date(this.props.time)
    return (
      <div>
        <h2>{this.props.title}</h2>
        <div style={{padding:'16px 0',color: '#888'}}>
          {date.toLocaleDateString()} {date.toLocaleTimeString()}
        </div>
        <div style={{textAlign:'center'}}>
          <img src={this.props.img} style={{maxWidth:'100%'}}/>
        </div>
        <p>{this.props.description}</p>
      </div>
    )
  }
}

export default NewsOverview

六、redux-promise 中间件

既然 Action Creator 能够回到函数,当然也足以回到别的值。另一种异步操作的化解方案,正是让 Action Creator 重返1个 Promise 对象。

那就需求动用redux-promise中间件。

import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
import reducer from './reducers';

const store = createStore(
  reducer,
  applyMiddleware(promiseMiddleware)
); 

其一中间件使得store.dispatch主意还可以 Promise 对象当作参数。那时,Action Creator 有二种写法。写法一,重临值是三个Promise 对象。

const fetchPosts = 
  (dispatch, postTitle) => new Promise(function (resolve, reject) {
     dispatch(requestPosts(postTitle));
     return fetch(`/some/API/${postTitle}.json`)
       .then(response => {
         type: 'FETCH_POSTS',
         payload: response.json()
       });
});

写法二,Action 对象的payload性子是一个 Promise 对象。那亟需从redux-actions模块引进createAction艺术,并且写法也要产生上面那样。

import { createAction } from 'redux-actions';

class AsyncApp extends Component {
  componentDidMount() {
    const { dispatch, selectedPost } = this.props
    // 发出同步 Action
    dispatch(requestPosts(selectedPost));
    // 发出异步 Action
    dispatch(createAction(
      'FETCH_POSTS', 
      fetch(`/some/API/${postTitle}.json`)
        .then(response => response.json())
    ));
  }

地点代码中,第二个dispatch措施爆发的是异步 Action,唯有等到操作结束,那么些 Action 才会实际产生。注意,createAction的第三个参数必须是二个 Promise 对象。

看一下redux-promise的源码,就能够精晓它里面是怎么操作的。

export default function promiseMiddleware({ dispatch }) {
  return next => action => {
    if (!isFSA(action)) {
      return isPromise(action)
        ? action.then(dispatch)
        : next(action);
    }

    return isPromise(action.payload)
      ? action.payload.then(
          result => dispatch({ ...action, payload: result }),
          error => {
            dispatch({ ...action, payload: error, error: true });
            return Promise.reject(error);
          }
        )
      : next(action);
  };
}

从上边代码能够看看,假如 Action 自己是3个 Promise,它 resolve 以往的值应该是3个 Action 对象,会被dispatch方法送出(action.then(dispatch)),但 reject 现在不会有别的动作;假使 Action 对象的payload品质是一个 Promise 对象,那么不论 resolve 和 reject,dispatch主意都会生出 Action。

中间件和异步操作,就介绍到此地。下1篇著作将是终极一片段,介绍如何使用react-redux这个库。

(完)

貌似的话,redux管理异步的主意有三种:直接方法和中间件形式;

接下来写要跟外界打交道的组件,那个组件要求响应用户的点击按键的轩然大波,发起获取情报列表的伸手,然后把数量放到页面里。 src/containers/newsList.js:

文书档案消息

  • 版权注脚:自由转发-非商用-非衍生-保持签字(创新意识大利共产党享三.0许可证)

  • 刊登日期: <abbr class="published" title="2014-0九-20T0捌:二三:2捌 0八:00" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: rgb(6一, 陆一, 6一);">201陆年4月2日</abbr>

  • 更多内容: 档案 » JavaScript

  • 文集:《前方的路》,《今后世界的幸存者》

  • 社交媒体:[

    图片 7

    image.png

    twitter](https://twitter.com/ruanyf),[

    图片 8

    image.png

    weibo](http://weibo.com/ruanyf)

</article>

图片 9

一灯学堂

图片 10

QCon 北京2018

直接方法:

import React from 'react';
import { connect } from 'react-redux'
import NewsOverview from 'components/NewsOverview'
import {pushList} from 'actions/news'

class NewsList extends React.Component {
  search(){
    let keyword = this.refs.keyInput.value
    // TODO: 获取新闻列表
  }
  renderList(){
    return this.props.list.map(item =>{
      item.key = item.title
      return React.createElement(NewsOverview, item)
    })
  }
  render(){
    return (
      <div>
        <div>
          <input ref="keyInput"/>
          <button onClick={this.search.bind(this)}>搜索</button>
        </div>
        <div>
          {this.renderList()}
        </div>
      </div>
    )
  }
}

function mapStateToProps(state) {
  // 一般一组状态都是为一个页面服务的,所以把它们一股脑的映射过来比较方便
  // 但是把映射一一写出来也有好处,就是很容易看到组件里有什么属性
  return Object.assign({}, state.news)
}
export default connect(mapStateToProps)(NewsList);

连带小说

  • 2018.02.23: Node 计时器详解

    JavaScript 是单线程运营,异步操作极其重大。

  • 2017.09.19: 《ES6标准入门(第3版)》上市了!

    201柒年八月,TC39 委员会正式发表了《ES20壹7 标准》。

  • 2017.09.07: asm.js 和 Emscripten 入门教程

    Web 本领蒸蒸日上,不过有2个领域直接不恐怕突破 ---- 游戏。

  • 2017.08.09: Koa 框架教程

    Node 重要用在开拓 Web 应用。那决定了选拔 Node,往往离不开 Web 应用框架。

直接方法就死自定义异步的行为,保留dispatch同步的功力。
思路:正是讲异步重返的结果塞进action中,然后在经过dispatch同步到reduce中,再转移state;

代码差非常少了,不过它以往无法工作,因为我们还没给增多ajax请求的代码。最简便残暴的不二等秘书技就是在下边包车型地铁search方法中央直属机关接来个ajax请求, 然后在回调中派发“PUSH_NEWS_LIST”的action。也行。先写出来吗。为了简化ajax代码,小编在src/index.html里面引进了jQuery。 当然,用了react,大家恐怕用不上jQuery的别的功效,所以用fetch也许其余ajax库都行。

广告(购买广告位)

图片 11

coding.net

图片 12

优达学城

图片 13

search(){
  let keyword = this.refs.keyInput.value
  window.$.ajax({
    url: 'http://www.tngou.net/api/search',
    data: { keyword, name: 'topword' },
    dataType: 'jsonp',
    success: (data)=>{
      if(data.status)
        this.props.dispatch(pushList(data.tngou))
    }
  })
}

留言(49条)

surersen 说:

刚上学完阮老师的Redux 入门教程(一),写的要命通俗易懂,学习了,谢谢。

<abbr class="published" title="September 20, 2016 10:47 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年9月20日 10:47</abbr> | # | 引用

Micooz 说:

Redux在拍卖异步轮询的政工场景时非常难堪:

  1. 使用响应用户操作,开端轮询,每隔5秒dispatch3个异步action。
  2. 采纳遵照上三次action的reducer结果,自动改动一回状态(doing, done)。
  3. 轮询时期,应用须求基于重回结果分明是否甘休轮询。

劳动就出在步骤3中,决断逻辑应该写在component中吗依然reducer中吗?

一. 写在component的render方法中断定不合适,component威尔Update也许componentDidUpdate也不太好,因为零部件比不小概受其余action的熏陶而改造状态,这一年组件的论断逻辑就能变得繁琐。
2. 写在reducer中也很狼狈,那年reducer要调控工作逻辑,停止轮询必要调用clearInterval,这就象征每一遍发action时要带上setInterval的重返值。

Redux管理叁回性异步action很便宜,但对于多异步action只怕链式异步action,未有适用的艺术举行进程序调控制。对于这种意况,抛开Redux使用正规办法或然是更加好的选择。

不知阮先生有什么提出?

<abbr class="published" title="September 20, 2016 10:59 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年9月20日 10:59</abbr> | # | 引用

seven 说:

不错不错,下边该实践了

<abbr class="published" title="September 20, 2016 12:15 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年9月20日 12:15</abbr> | # | 引用

York 说:

“奥秒就在 Action Creator 之中”,老师字打错了,应该是“奥密”吧!

<abbr class="published" title="September 20, 2016 1:55 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年9月20日 13:55</abbr> | # | 引用

侯侯 说:

前一周径直看的法定教程没太看懂,老师写的真是简明易懂,期待下1篇

<abbr class="published" title="September 20, 2016 3:14 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年9月20日 15:14</abbr> | # | 引用

阮一峰 说:

@York: 感激提出,已经济体考订。

@Micooz:轮询的起来和了结判别,都写在 Action Creator 里面。

<abbr class="published" title="September 21, 2016 1:55 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年9月21日 13:55</abbr> | # | 引用

孙梦华 说:

@Micooz:

您能够在dispatch之后再回到八个promise结果,举例:

<pre style="margin: 0px 0px 1.5em; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: 700; font-style: normal; border: none; color: rgb(17, 17, 17); font-size: 1.6em;">this.props.dispatch(login(data)).then((response) => {
if (response.code == 200) {
// do something
}
});
</pre>

<abbr class="published" title="September 21, 2016 5:20 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年9月21日 17:20</abbr> | # | 引用

dp0qb 说:

多谢先生!!!

<abbr class="published" title="September 21, 2016 8:25 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年9月21日 20:25</abbr> | # | 引用

赵越 说:

很认真的拜读了你的稿子,写的非常的赞。
对redux-promise中间件中的1段话不太驾驭。
要是 Action 对象的payload属性是1个 Promise 对象,那么不论是 resolve 和 reject,dispatch方法都会产生 Action。

本人个人开首以为 写法1,重回值是三个 Promise 对象,也得以在reject时产生action吧?
敬请赐教哈

<abbr class="published" title="October 4, 2016 9:42 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年10月 4日 21:42</abbr> | # | 引用

cisen 说:

compose真的是可怜玄妙,最毕生成3个洋葱剖面图的函数,dispatch(action)在最基本,中间件在两边。两句钻探了半天惨研究出来,真实够厉害的。自个儿也不失为渣T_T

<abbr class="published" title="October 22, 2016 10:13 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年10月22日 22:13</abbr> | # | 引用

lazyou 说:

到了第二章就看不懂了, 小编毕竟贫乏了何等本事。。。。。

<abbr class="published" title="October 27, 2016 10:23 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年10月27日 10:23</abbr> | # | 引用

好炫 说:

教师没看懂
异步的话平昔settimeout 然后举行dispathc不就足以了呢?

干什么须求绕3个弯,先dispatch(fn) 传入一个函数然后再在该函数内settimeout 然后再dispatch? 这里实在是想不晓得,而且本人写了壹晃实在左近没什么不雷同 希望老师引导下

<abbr class="published" title="October 29, 2016 10:52 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年10月29日 10:52</abbr> | # | 引用

coolpot 说:

export default function applyMiddleware(...middlewares)

问1个比较入门的难题。

借问这里的多个点是什么样看头啊

<abbr class="published" title="November 4, 2016 11:16 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年11月 4日 11:16</abbr> | # | 引用

赶过淡紫 说:

<pre style="margin: 0px 0px 1.5em; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: 700; font-style: normal; border: none; color: rgb(17, 17, 17); font-size: 1.6em;">引用coolpot的发言:</pre>

export default function applyMiddleware(...middlewares)

问3个比较入门的主题素材。

试问这里的四个点是如何意思啊

任意长参数

<abbr class="published" title="November 6, 2016 2:13 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年11月 6日 14:13</abbr> | # | 引用

onein 说:

代表从未知道要用到promise这其中间件来干什么。 获取到promise对象后干嘛用。。。

<abbr class="published" title="November 8, 2016 12:26 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年11月 8日 00:26</abbr> | # | 引用

cisen 说:

@Micooz:

你需要sagas

<abbr class="published" title="November 25, 2016 3:29 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年11月25日 15:29</abbr> | # | 引用

laden666666 说:

<pre style="margin: 0px 0px 一.伍em; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: 700; font-style: normal; border: none; color: rgb(17, 壹七, 壹7); font-size: 一.陆em;">引用好炫的发言:</pre>

教员没看懂
异步的话平昔settimeout 然后举行dispathc不就足以了呢?

缘何须要绕2个弯,先dispatch(fn) 传入2个函数然后再在该函数内settimeout 然后再dispatch? 这里实在是想不精晓,而且作者写了1晃真正临近没什么区别 希望老师教导下

五个action是为了将异步的事态音信也写入redux里面。有个别项目平昔能够把异步状态写到控件本身的state里面了,而有个别类别是索要写到redux里面,阮先生正是讲的就是第3种状态。

假设要将异步的情状信息也写入redux里面,最少供给发四个action:第八个是1道的action,是将异步开首这几个境况写入了redux;第二个action是异步方法的结果,恐怕是呼吁成功的action,也说不定是没戏的action,因为不只怕同临时候打响和停业,所以阮先生说异步方法有叁种action,但贰回异步方法暴发三种就够。

接下去阮先生说了三种艺术做那件事,第三种是createAction合营redux-thunk中间件,另一种是createAction合作redux-promise中间件。那一个点子好处就是你只须求调用一回就足以自行地发出这四个action,用起来相比较方便。

多少个情势中都从没采用settimeout,都以用promise做的,那和settimeout完全不是一回事

<abbr class="published" title="November 26, 2016 10:59 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年11月26日 10:59</abbr> | # | 引用

咸鱼 说:

阮先生,redux-thunk、redux-promise、redux-saga那八个异步方案孰优孰劣您有啥样思想不?

<abbr class="published" title="December 14, 2016 8:36 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年12月14日 20:36</abbr> | # | 引用

lihuihero 说:

写异步的先把团结整晕了。

<abbr class="published" title="December 15, 2016 7:15 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年12月15日 19:15</abbr> | # | 引用

MLGB 说:

redux早晚得死,MLGB,搞的这样麻烦。很久此前,能在历史中一贯被接续的框架,一定是操作简便的。

<abbr class="published" title="December 28, 2016 3:40 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2016年12月28日 15:40</abbr> | # | 引用

曹东旭 说:

createAction(
'FETCH_POSTS',
fetch(/some/API/${postTitle}.json)
.then(response => response.json())
)

阮先生,您这段代码create Action的调用格局是或不是有题目,官英特网一般应该
createAction(
'FETCH_POSTS')(
fetch(/some/API/${postTitle}.json)
.then(response => response.json())
)

<abbr class="published" title="January 6, 2017 11:16 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年1月 6日 11:16</abbr> | # | 引用

高峰 说:

多谢老师,说的很好,然而作者的通晓才能有一点差,稳步体会

<abbr class="published" title="January 16, 2017 9:20 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年1月16日 09:20</abbr> | # | 引用

毛庭峰 说:

那有个别确实好难精通啊。表示看不懂

<abbr class="published" title="January 20, 2017 10:16 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年1月20日 10:16</abbr> | # | 引用

Nesus 说:

redux中的compose更新了,施行顺序从右向左。

<abbr class="published" title="February 17, 2017 10:24 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年2月17日 10:24</abbr> | # | 引用

黄鑫慧 说:

<pre style="margin: 0px 0px 1.5em; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: 700; font-style: normal; border: none; color: rgb(壹七, 17, 17); font-size: 一.陆em;">引用曹东旭的演说:</pre>

createAction(
'FETCH_POSTS',
fetch(/some/API/${postTitle}.json)
.then(response => response.json())
)

阮先生,您这段代码create Action的调用方式是还是不是有失常态,官网络一般应该
createAction(
'FETCH_POSTS')(
fetch(/some/API/${postTitle}.json)
.then(response => response.json())
)

多谢,用如此写的格局,终于成功了

<abbr class="published" title="March 2, 2017 8:04 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年3月 2日 20:04</abbr> | # | 引用

wulusai 说:

大神 您读书redux参谋了怎么材质 ,网站能够发生来么

<abbr class="published" title="March 5, 2017 10:10 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年3月 5日 22:10</abbr> | # | 引用

八只要有你 说:

阮先生,您的那块代码少加了三个括号吧,
.then(response => {
type: 'FETCH_POSTS',
payload: response.json()
});

.then(response => ({
type: 'FETCH_POSTS',
payload: response.json()
}));

<abbr class="published" title="March 10, 2017 6:05 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年3月10日 18:05</abbr> | # | 引用

余皖林 说:

此间应该有误:上面是法定写法
第一处、
import ReduxThunk from 'redux-thunk' // no changes here

<abbr class="published" title="March 31, 2017 4:42 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年3月31日 16:42</abbr> | # | 引用

涛涛 说:

正在随后导师学

<abbr class="published" title="April 17, 2017 4:41 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年4月17日 16:41</abbr> | # | 引用

wujohns 说:

本条做法比好丑,还不及把异步放在外层,里层包装dispatch

<abbr class="published" title="April 22, 2017 2:44 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年4月22日 14:44</abbr> | # | 引用

王一之 说:

从今接触了redux,不了然代码写在哪……

<abbr class="published" title="June 11, 2017 9:18 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年6月11日 21:18</abbr> | # | 引用

您的大名 说:

认为现在react那一套有一点点弄虚作假,为了秀有个别编制程序观念,想的太远了,《易》曰:“易则易知,简则易从”

<abbr class="published" title="June 13, 2017 5:56 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年6月13日 17:56</abbr> | # | 引用

coderzzp 说:

在中游件redux-logger这一块有一个小更新:
import createLogger from 'redux-logger';
const logger = createLogger();
近日径直引进正是二个logger,无需再调用函数,造成如下:
import logger from 'redux-logger';

<abbr class="published" title="August 4, 2017 9:37 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年8月 4日 09:37</abbr> | # | 引用

大明 说:

<pre style="margin: 0px 0px 1.5em; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: 700; font-style: normal; border: none; color: rgb(17, 17, 17); font-size: 1.6em;">引用cisen的发言:</pre>

compose真的是可怜抢眼,最后生成3个玉葱剖面图的函数,dispatch(action)在最主题,中间件在两边。两句商讨了半天惨商量出来,真实够厉害的。自身也不失为渣T_T

那叫义务链格局,compose是它的1种选拔,完整的义务链的定义全体的意思更丰裕。

<abbr class="published" title="August 4, 2017 10:45 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年8月 4日 10:45</abbr> | # | 引用

小明 说:

认为到前边写得很好,作品第四有个别“redux-promise 中间件”说的好晦涩难懂,自身捋了半天都从未有过很清楚。贴的源码也不便于看懂。
实在自个儿觉着您能够改成,把中间件dedux-promise和promise类型的action合成二个顺序流程来说,他们是一体化的调用流程是如何的。

<abbr class="published" title="August 4, 2017 12:48 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年8月 4日 12:48</abbr> | # | 引用

J 说:

有人发掘官方网站的例证,每趟运维服务时,reducer都会触发贰次default吗?。。

<abbr class="published" title="August 10, 2017 1:49 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年8月10日 13:49</abbr> | # | 引用

Even 说:

你的学科对自个儿很有启示,看来现在的路还长。可是比较于vuex,redux的确太难为了。

<abbr class="published" title="August 11, 2017 12:36 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年8月11日 00:36</abbr> | # | 引用

张三 说:

要不要如此复杂,这么多专门的学业术语,表示一脸懵逼,哎...真心看不懂

<abbr class="published" title="September 13, 2017 5:15 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年9月13日 17:15</abbr> | # | 引用

一网友 说:

自家也没看懂,不知情自家缺少什么才具!函数认为太多了,根本分不清哪些是自定义函数,哪些是库函数!如故要谢谢峰哥!

<abbr class="published" title="September 18, 2017 7:39 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年9月18日 19:39</abbr> | # | 引用

ngaiwe 说:

阮先生 请教难点这些Action Creator写在怎么地点?是新建二个文本夹遵照项目创立八个?然后分别import 。照旧写在组件中?

<abbr class="published" title="October 28, 2017 9:07 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年10月28日 09:07</abbr> | # | 引用

wongjorie 说:

勘误 => applyMiddleware()

<abbr class="published" title="November 7, 2017 2:22 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年11月 7日 14:22</abbr> | # | 引用

water 说:

作者在介绍redux-thunk中间件的用法的时,介绍store.dispatch()的参数是1个函数,结协作者的代码:return fetch(/some/API/${postTitle}.json)
.then(response => response.json())
.then(json => dispatch(receivePosts(postTitle, json))).
但是fetch().then() return的结果是三个函数吗?

<abbr class="published" title="November 9, 2017 4:45 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年11月 9日 16:45</abbr> | # | 引用

june 说:

<pre style="margin: 0px 0px 1.5em; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: 700; font-style: normal; border: none; color: rgb(17, 17, 17); font-size: 1.6em;">引用coolpot的发言:</pre>

export default function applyMiddleware(...middlewares)

问二个相比入门的难点。

借问这里的三个点是何许看头啊

es六 里的解构

<abbr class="published" title="December 6, 2017 5:23 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年12月 6日 17:23</abbr> | # | 引用

kj huang 说:

笔者有以下的疑云,求解答:
当真,redux thunk让大家从一向再次来到3个action object形成能够重回3个函数F。而在这一个函数里我们得以做越来越多的政工,那那一个函数F本人重返什么主要呢?有啥样意思呢?

就比方阮先生的例子里

return fetch(/some/API/${postTitle}.json)
.then(response => response.json())
.then(json => dispatch(receivePosts(postTitle, json)));
};

此处把return去掉照样能够。

<abbr class="published" title="December 7, 2017 8:20 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年12月 7日 08:20</abbr> | # | 引用

小冶 说:

@kj huang:

多变Promise链式调用 ,前面能够接着继续.then()

<abbr class="published" title="December 11, 2017 12:57 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年12月11日 00:57</abbr> | # | 引用

小鱼儿 说:

阮先生你可不可以写篇redux-saga的文章,网络的材料看不太懂

<abbr class="published" title="December 21, 2017 2:38 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2017年12月21日 14:38</abbr> | # | 引用

wulinjie122 说:

确实,redux许多事物不是那么好通晓,对于前端开荒供给有必然的经历,不然开发出来都以坑。

<abbr class="published" title="January 18, 2018 10:50 AM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2018年1月18日 10:50</abbr> | # | 引用

wenwen 说:

阮先生,第二个fetchPosts 的事例是还是不是少了三个"return".否则函数一点都不大概重返

<abbr class="published" title="January 22, 2018 3:18 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2018年1月22日 15:18</abbr> | # | 引用

小棋童 说:

有个难点 作者这些异步 第二个action 作者不发 直接在异步请求之后 在出殡和埋葬 action 效果也如出1辙能落到实处啊 不晓得 第6个action存在的含义 求指教

<abbr class="published" title="February 1, 2018 5:43 PM" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: black;">2018年2月 1日 17:43</abbr> | # | 引用

demo:

终极别忘了修改入口、增加reducer:把src/index.js里面Provider下边包车型地铁机件换来NewsList; 在src/reducers/index.js里面引进新增加的reducer,并加到reducers对象里。

自家要发布观点

<form method="post" action="" name="comments_form" id="comments-form" onsubmit="return pleaseWait();" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: rgb(17, 17, 17);">

<label for="comment-text" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: rgb(一柒, 17, 17);">您的留言 (HTML标签部分可用)</label>

<textarea id="comment-text" name="text" rows="10" cols="50" style="font-size: 1.13em; border: 1px solid rgb(211, 211, 211); background-color: rgb(245, 244, 223); padding: 0.5em; width: 694.75px;"></textarea>

<label for="comment-author" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: rgb(一柒, 壹柒, 一柒);">您的芳名:</label>

<input id="comment-author" name="author" size="30" value="" style="font-size: 1.13em; border: 1px solid rgb(211, 211, 211); margin-top: 0px; line-height: 1.2; padding: 0.4em 0.3em; background-color: rgb(245, 244, 223);"> «-必填

<label for="comment-email" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: rgb(壹7, 17, 1柒);">电子邮件:</label>

<input id="comment-email" name="email" size="30" value="" style="font-size: 1.13em; border: 1px solid rgb(211, 211, 211); margin-top: 0px; line-height: 1.2; padding: 0.4em 0.3em; background-color: rgb(245, 244, 223);"> «-必填,不公开

<label for="comment-url" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: rgb(一七, 壹七, 17);">个人网址:</label>

<input id="comment-url" name="url" size="30" value="" style="font-size: 一.一三em; border: 1px solid rgb(211, 21一, 21一); margin-top: 0px; line-height: 一.二; padding: 0.4em 0.三em; background-color: rgb(2四5, 24四, 2二叁);"> «-作者信任你,不会填写广告链接

<label for="comment-bake-cookie" style="margin: 0px; padding: 0px; list-style-type: none; text-align: left; text-decoration: none; font-weight: normal; font-style: normal; border: none; color: rgb(一7, 一7, 一7);">记住个人音信?</label><input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="!this.checked?forgetMe(document.comments_form):rememberMe(document.comments_form)" value="1" accesskey="r" style="font-size: 1.13em; border: 1px solid rgb(211, 211, 211); margin-top: 0px; line-height: 1.2; padding: 0.4em 0.3em; background-color: rgb(245, 244, 223);">

<input type="submit" accesskey="s" name="post" id="comment-submit" value="发表" style="font-size: 壹.壹3em; border: 壹px solid rgb(211, 21一, 21壹); margin-top: 0px; line-height: 一.贰; padding: 0.2em 三em; background-color: rgb(24五, 24四, 22三); width: 十em; text-align: center;"> «- 点击按键

</form>

微博 | 推特 | GitHub

2018 © 本人的邮件 |

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:redux什么的都用起来,redux的中间件的利用

关键词: 日记本 react redux React.js