澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站:轻易管理状态,Redux构建

React/Redux营造的同构Web应用

2018/07/30 · CSS · React, Redux

最初的稿件出处: 原 一成(Hara Kazunari)   译文出处:侯斌   

我们好,我是原十分之一(@herablog卡塔尔国,方今在CyberAgent主要担当前端开拓。

Ameblo(注: Ameba博客,Ameba Blog,简单的称呼Ameblo)于二零一五年3月,将前端部分由原本的Java构造的接收,重构成为以node.js、React为根底的Web应用。那篇小说介绍了此次重构的缘起、指标、系统规划以至最终落得的结果。

新系统揭橥后,立刻就有人注意到了那个调换。

 澳门新浦京娱乐场网站 1

twitter_msg.png

React Context API: 轻易处理处境

2018/09/03 · JavaScript · React

初藳出处: Abdulazeez Adeshina   译文出处:OFED   

行使最新的 React Context API 管理状态特别轻易。以后就跟随笔者一起学学下它和 Redux 的界别以致它是何许使用的啊。

**综述:**React Context API 在 React 生态系统中而不是个例外交事务物。可是,在 React 16.3.0 版本中做了有的改进。那一个改革是那般庞大,以至于大大减弱了大家对 Redux 和其余高等状态管理库的供给。在本文中,你将经过三个实用教程掌握到新的 React Context API 是怎么替代 Redux 完结小型应用的景色处理的。

你需要 Mobx 还是 Redux ?

2018/02/22 · JavaScript · mobx, Redux

原来的文章出处: 熊建刚的博客   

在过去一年,更加多的档案的次序持续也许在此之前利用React和Redux开荒,那是日前前端行业内部很宽泛的生机勃勃种前端项目实施方案,然而随着开垦品种尤为多,越来越各类化时,个人又有了区别的感想和设法。是或不是因为早就有了一个比较何足为奇的,熟练的项目技艺栈,大家就平素完全沿用呢,有未有比他更合乎的方案吗?刚好遇上共青团和少先队方今有二个新类型,于是博主初阶思量,有未有极大可能率使用其他可代表本领开采呢?既可以提升开采效用,又能开展本领储备和见闻,经过应用商讨,选用了Mobx,最后使用React Mobx搭建了新类型,本篇总括分享从才能选型到品种达成的较完整进度,希望同盟升高。

索引

  • 1 前言
  • 2 状态管理
  • 3 Mobx VS Redux
    • 3.1 Redux
    • 3.2 Mobx
    • 3.3 函数式和面向对象
    • 3.4 单一store和多store
    • 3.5 JavaScript对象和可观看对象
    • 3.6 不可变(Immutable)和可变(Mutable)
    • 3.7 mobx-react和react-redux
  • 4 选择Mobx的原因
  • 5 不选择Mobx的只怕原因
  • 6 代码相比
    • 6.1 架构
    • 6.2 注入Props
    • 6.3 定义Action/Reducer等
    • 6.4 异步Action
  • 7 片段设法
  • 8 参考

澳门新浦京娱乐场网站 2

系统重构的导火线

二零零零年起,Ameblo成为了东瀛境内最大局面包车型大巴博客服务。但是随着系统规模的加强,以至广大有关人口不断追加各类模块、页面指导链接等,最后使得页面表现缓慢、对网页浏览量(PV卡塔尔国造成了丰富严重的影响。况兼页面展现速度方面,绝大超级多是前面三个的题目,并不是是后端的难点。

依据上述那么些主题材料,大家决定以狠抓页面表现速度为重要对象,对系统进行到底重构。与此同期后端系统也在张开重构,将过去的数码部分进行API化退换。那个时候正是三个将All-in-one的巨型Java应用实行适当分割的绝佳良机。

Redux 快捷回想

在直接奔向宗目的在于此以前,大家先来连忙回看下 Redux,以便大家越来越好的可比两个的界别。redux 是一个有助于状态管理的 JavaScript 库。Redux 本人和 React 并从未关系。来自世界各州的成百上千开辟者选取在风靡的前端框架(举个例子 ReactAngular )中使用 Redux。

证多美滋(Dumex卡塔尔(قطر‎(Beingmate卡塔尔些,在本文中,状态管理指的是管理单页面应用(SPA)中发出的基于特定事件而接触的情状变化。比方,叁个按键的点击事件依然一条来源于服务器的异步音讯等,都足以触发应用状态的变化。

在 Redux 中,你越发须要在乎下边几点:

  1. 全方位 app 的动静存款和储蓄在单个对象中(该目的被称作数据源)。
  2. 举个例子要转移状态,你必要经过 dispatch 方法触发 actions,actions 描述了应有爆发的事情。
  3. 在 Redux 中,你不可能改过对象的习性或修正现成数组,必得从来再次回到新对象或新数组。

如果你对 Redux 并不熟练何况你想要了然越多,请移步 Redux 的实用教程学习。

前言

当大家运用React开辟web应用程序时,在React组件内,能够选取this.setState()this.state拍卖或访谈组件内境况,但是随着项目变大,状态变复杂,日常要求构思组件间通信难点,首要不外乎以下两点:

  1. 某叁个情形必要在三个零器件间分享(访谈,更新);
  2. 某零部件内相互需求接触别的零部件的景况更新;

有关这个标题,React组件开辟施行推荐将公用组件状态提高:

Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor

万般多组件必要处理同生机勃勃景观,大家推荐将共享状态提高至他们的大器晚成道近期祖先组件内。更加的多详细的情况查看

当项目特别复杂时,我们开掘唯有是升格状态已经非常小概适应那样复杂的气象管理了,程序状态变得相比难同步,操作,四处是回调,公布,订阅,那意味着我们需求越来越好的境况管理方法,于是就引进了意况管理库,如Redux,Mobx,Jumpsuit,Alt.js等。

title: 翻译|A Dummy’s Guide to Redux and Thunk in React
date: 2017-04-15 21:36:07
categories: 翻译
tags: Redux

本学科总共6篇,每一日更新风流倜傥篇,请关注我们!你能够进去历史新闻查看以后作品,也敬请期望大家的新小说!

目标

本次系统重构确立了以下多少个指标。

React Context API 指南

The React Context API 提供了意气风发种通过组件树传递数据的法子,而不用经过 props 属性一百年不遇的传递。在 React 中,数据平日会作为叁特性情从父组件传递到子组件。

应用最新的 React Context API 要求四个关键步骤:

  1. 将早先状态传递给 React.createContext。这一个方法会重回八个蕴涵 ProviderConsumer 的对象。
  2. 使用 Provider 组件封装在组件树的最外层,并收受一个 value 属性。value 属性可以是任何值。
  3. 使用 Consumer 组件,在组件树中 Provider 组件内部的别样地点都能取得到状态的子集。

如你所见,所提到的定义其实与 Redux 未有怎么两样。事实上,以至 Redux 也在其公共 API 的最底层使用了 React Context API。不过,直到日前,Context API 才抵达了足足成熟的程度。

情景管理

气象处理库,无论是Redux,依旧Mobx那一个,其本质皆以为着消除情状管理混乱,不也可能有效联合的标题,它们都帮忙:

  1. 集合爱戴管理接收状态;
  2. 某大器晚成景色独有二个可靠数据来自(日常命名称为store,指情况容器);
  3. 操作更新意况方式统生机勃勃,并且可控(日常以action情势提供立异情况的门道);
  4. 支撑将store与React组件连接,如react-reduxmobx-react;常常接收状态管理库后,大家将React组件从事情上划分为两类:
    1. 容器组件(Container Components):担任管理具体育赛事情和状态数据,将事情或气象管理函数传入体现型组件;
    2. 呈现型组件(Presentation Components):担任显示视图,视图人机联作回调内调用传入的管理函数;

1、React第三方组件5(状态管理之Redux的应用①轻易易行利用卡塔尔---2018.03.20

页面表现速度的改正(简单来讲越快越好)

用于测定客户体验的目的有好多,大家以为当中对客商最要害的目标正是页面表现速度。页面表现速度越快,指标内容就能够越快达到,让职分在长时间内成功。本次重构的靶子是硬着头皮的维持博客文章、以及在Ameblo内所表现的好些个的内容的原有情势,在不破坏现成价值、体验的底工上,提高展现和页面行为的进程。

使用 Redux 创建 React 应用

如上所述,本文的指标是向你显得新的 Context API 如何在Mini应用中替代Redux。因而,你首先要用 Redux 创设七个精短的 React app,然后,你将学习如何删除这一个场地管理库,以便更加好地使用 React Context API。

您将创设的身体力行应用是一个拍卖部分盛行食品及其来源的列表。这么些利用还将囊括一个查找功用,使顾客能够依照部分第豆蔻年华词过滤列表。

末尾,你将成立多少个近乎下面所述的行使:

Mobx VS Redux

近来来看,Redux已然是React应用状态管理库中的霸主了,而Mobx则是一方藩王,大家怎么要选拔Mobx,并不是世襲套用Redux呢,那就须要相比他们的争论了。

Mobx和Redux都是JavaScript应用状态管理库,都适用于React,Angular,VueJs等框架或库,实际不是受制于某风华正茂特定UI库。

Redux和Thunk的选拔傻机巴二教程

初藳参见
Github repo
刚烈推荐那篇小说.

假若您和自身相通,读了Redux的文档,看了Dan的录制,Wes的学科,如故不能抓住怎么选用Redux的为主,希望这些白痴教程能够帮到你.
在真的进行在此以前,笔者做了风流罗曼蒂克部分品尝,所以笔者主宰写一些从曾经存在的利用fetch JSON数据的app一步步转换为使用Redux和Redux Thunk的app.假诺你不晓得Thunk是怎么,也无须操心,大家会在”Redux 之路”部分来利用它实践函数的异步调用.
其大器晚成科目须求你对React和ES6/二零一六有宗旨的通晓.

2、React第三方组件5(状态管理之Redux的行使②TodoList上卡塔尔(英语:State of Qatar)---2018.03.21

系统的今世化(搭乘生态系统)

过去的Web应用是将数据以HTML的花样重回,此时并不曾什么难题。但是,随着剧情的加码,体验的丰裕化,以致配备的各类化,使得前端所占的比重进一层大。早前要付出多个好的Web应用,假如要高品质,就必定不要将左右端分隔断。当年以这么些须要开荒的连串,在经历了10年之后,已经远远不可能适应现阶段的生态系统。

「跟上近日生态系统」,以此来构建系统会带来巨额的实惠。因为作为基本的生态系统,其开荒极其活跃,天天都会有数以百计新的idea。由此摩登的技术和职能更易于被吸收接纳,同一时候达成高品质也特别便于。同期,这些「新」对于青春的技能新人也更是重大。仅知道旧准则旧技艺的二叔对于叁个绝妙的集团来说是向来不前景的(自觉本身膝馒头也中了一箭)。

品种供给

鉴于本文仅使用 React 和部分 NPM 库,由此除了 Node.js 和 NPM 之外,你如何都无需。假让你还未安装 Node.js 和 NPM,请前往官网下载并设置。

设置那个信任后,你还索要安装 create-react-app 工具。这几个工具帮助开拓人士成立 React 项目。张开叁个终极并运转以下命令来设置:

npm i -g create-react-app

1
npm i -g create-react-app

Redux

要介绍Redux,大家就只能聊起Flux了:

Flux is the application architecture that Facebook uses for building client-side web applications.It’s more of a pattern rather than a formal framework

Flux是Facebook(TWTCRUISER.US卡塔尔用来开拓客商端-服务端web应用程序的利用布局,它更加多是后生可畏种布局格局,而非一个一定框架。详解Flux。

而Redux越来越多的是遵循Flux方式的黄金年代种达成,是三个JavaScript库,它关心点首假诺以下几地点:

  1. Action:叁个JavaScript对象,描述动作相关消息,主要包括type属性和payload属性:
    1. type:action 类型;
    2. payload:负载数据;
  2. Reducer:定义应用状态怎样响应区别动作(action),怎么着立异情形;
  3. Store:管理action和reducer及其关联的目的,首要提供以下职能:
    1. 维护应用状态并援助访谈状态(getState(卡塔尔(قطر‎);
    2. 支撑监听action的散发,更新景况(dispatch(action卡塔尔国);
    3. 支撑订阅store的改变(subscribe(listener卡塔尔(英语:State of Qatar));
  4. 异步流:由于Redux全部对store状态的改过,都应有经过action触发,异步职分(日常皆以工作或获取数据职责)也不例外,而为了不将业务或数额相关的职责混入React组件中,就须求运用任何框架合营管理异步任务流程,如redux-thunkredux-saga等;

非Redux方法

components/ItemList.js中开创三个React组件,用于fetch和出示items列表.

澳门新浦京娱乐场网站:轻易管理状态,Redux构建的同构Web应用。3、React第三方组件5(状态管理之Redux的施用③TodoList中卡塔尔---2018.03.22

进级分界面设计、客商体验(二〇一四年版Ameblo)

Ameblo的无绳话机版在二〇〇八年资历了三次改版之后,就基本上未有太大的调换。那之中相当多顾客都早已习以为常了原生应用的设计和心得。那些类型也是为了不令人感觉很土很难用,达到顺适那个时候候期的二零一四年版分界面设计和客商体验。

OK,接下去让笔者切实详细聊聊。

搭建 React 应用

安装完 create-react-app 后,踏向项目所在目录,推行以下命令:

create-react-app redux-vs-context

1
create-react-app redux-vs-context

几秒钟后,create-react-app 将不负职分应用程序的创设。在这里之后,走入该工具成立的新目录,并安装 Redux:

# 步向应用目录 cd redux-vs-context # 安装 Redux npm i --save redux react-redux

1
2
3
4
5
# 进入应用目录
cd redux-vs-context
 
# 安装 Redux
npm i --save redux react-redux

注意: redux 是主库,react-redux 是推动 React 和 Redux 之间相互的库。同理可得,后面一个充任 React 和 Redux 之间的代理。

Mobx

Mobx是三个透明函数响应式编制程序(Transparently Functional Reactive Programming,TFRP)的处境管理库,它使得场馆管理简便可伸缩:

Anything that can be derived from the application state, should be derived. Automatically.

别的起点于应用状态的数额应该自行获得。

其规律如图:

澳门新浦京娱乐场网站 3

  1. Action:定义改换状态的动作函数,满含什么改换状态;
  2. Store:聚焦管理模块状态(State)和动作(action);
  3. Derivation(衍生):从利用状态中派生而出,且没有其余其余影响的数额,我们誉为derivation(衍生),衍生在偏下景况下存在:
    1. 客商分界面;
    2. 衍生数据;衍生主要有两种:
      1. Computed Values(总计值):总计值总是能够利用纯函数(pure function)自一时一刻可观察气象中得到;
      2. Reactions(反应):反应指处境改换时索要活动发出的副成效,这种情形下,我们要求落实其读写操作;

import {observable, autorun} from 'mobx'; var todoStore = observable({ /* some observable state */ todos: [], /* a derived value */ get completedCount() { return this.todos.filter(todo => todo.completed).length; } }); /* a function that observes the state */ autorun(function() { console.log("Completed %d of %d items", todoStore.completedCount, todoStore.todos.length ); }); /* ..and some actions that modify the state */ todoStore.todos[0] = { title: "Take a walk", completed: false }; // -> synchronously prints: 'Completed 0 of 1 items' todoStore.todos[0].completed = true; // -> synchronously prints: 'Completed 1 of 1 items'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import {observable, autorun} from 'mobx';
 
var todoStore = observable({
    /* some observable state */
    todos: [],
 
    /* a derived value */
    get completedCount() {
        return this.todos.filter(todo => todo.completed).length;
    }
});
 
/* a function that observes the state */
autorun(function() {
    console.log("Completed %d of %d items",
        todoStore.completedCount,
        todoStore.todos.length
    );
});
 
/* ..and some actions that modify the state */
todoStore.todos[0] = {
    title: "Take a walk",
    completed: false
};
// -> synchronously prints: 'Completed 0 of 1 items'
 
todoStore.todos[0].completed = true;
// -> synchronously prints: 'Completed 1 of 1 items'

位列一下幼功构件

先是大家选取含有种种items的state配置叁个静态的机件,2 个boolean state分别用于根据loading和error来渲染出个别的单独展现组件.

 import React, { Component } from 'react';
class ItemList extends Component {
  constructor() {
      super();
      this.state = {
          items: [//items在列表中现实的内容
              {
                  id: 1,
                  label: 'List item 1'
              },
              {
                  id: 2,
                  label: 'List item 2'
              },
              {
                  id: 3,
                  label: 'List item 3'
              },
              {
                  id: 4,
                  label: 'List item 4'
              }
          ],
          hasErrored: false, //网络请求错误的状态
          isLoading: false   //网络请求中的状态
      };
  }
  render() {
      if (this.state.hasErrored) {//根据Errored的状态决
      //定是否加载这个组件,网络请求错误时,false=>true
          return <p>Sorry! There was an error loading the items</p>;
      }
      if (this.state.isLoading) {
      //网络请求中的组件,发出请求时,false=>true
          return <p>Loading…</p>;
      }
      return (
          <ul>
              {this.state.items.map((item) => (
                  <li key={item.id}>
                      {item.label}
                  </li>
              ))}
          </ul>
      );
  }
}
export default ItemList;

唯恐看起来还不是特意能印证难题,可是已然是多个好的起头了.
渲染的时候,组件输出多少个items列表,可是假若您把isLoadinghasError的state由false改为false的时候,对应的<p></p>就能够来得出来.(注意各样组件都以return出来的,每趟只彰显多少个卡塔尔(英语:State of Qatar).

4、React第三方组件5(状态处理之Redux的采取④TodoList下卡塔尔(英语:State of Qatar)---2018.03.23

页面加载速度的改革

使用 Redux 开发 React 应用

你曾经搭建好了您的 React 应用,安装好了 Redux,现在,在你兴奋的开拓工具中开发你的品种。然后在 src 文件夹中开创八个文件:

  • foods.json :此文件富含二个用于保存食品及其来源音信的静态数组
  • reducers.js:此文件用于管理应用中 Redux 状态
  • actions.js:此文件用于保存应用中触发 Redux 状态更动的办法

所以,首先,打开 foods.json 文件,加多如下内容:

[ { "name": "Chinese Rice", "origin": "China", "continent": "Asia" }, { "name": "Amala", "origin": "Nigeria", "continent": "Africa" }, { "name": "Banku", "origin": "Ghana", "continent": "Africa" }, { "name": "Pão de Queijo", "origin": "Brazil", "continent": "South America" }, { "name": "Ewa Agoyin", "origin": "Nigeria", "continent": "Africa" } ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
[
  {
    "name": "Chinese Rice",
    "origin": "China",
    "continent": "Asia"
  },
  {
    "name": "Amala",
    "origin": "Nigeria",
    "continent": "Africa"
  },
  {
    "name": "Banku",
    "origin": "Ghana",
    "continent": "Africa"
  },
  {
    "name": "Pão de Queijo",
    "origin": "Brazil",
    "continent": "South America"
  },
  {
    "name": "Ewa Agoyin",
    "origin": "Nigeria",
    "continent": "Africa"
  }
]

如你所见,文件存款和储蓄的数额并不曾什么样非常。仅仅是二个包罗着分裂国家分歧食品的数组。

在概念了 foods.json 文件后,你能够小心于创建你的 Redux store 了。回看一下,store 是保存你的应用实况的独一来源。展开你的 reducers.js 文件,增加以下代码:

import Food from './foods'; const initialState = { food: Food, searchTerm: '', }; export default function reducer(state = initialState, action) { // 根据 action type 区分 switch (action.type) { case 'SEARCH_INPUT_CHANGED': const {searchTerm} = action.payload; return { ...state, searchTerm: searchTerm, food: searchTerm ? Food.filter( (food) => (food.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1) ) : Food, }; default: return state; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Food from './foods';
 
const initialState = {
  food: Food,
  searchTerm: '',
};
 
export default function reducer(state = initialState, action) {
  // 根据 action type 区分
  switch (action.type) {
    case 'SEARCH_INPUT_CHANGED':
      const {searchTerm} = action.payload;
      return {
        ...state,
        searchTerm: searchTerm,
        food: searchTerm ? Food.filter(
          (food) => (food.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1)
        ) : Food,
      };
    default:
      return state;
  }
}

在下面的代码中,你能够阅览 reducer 方法选择三个参数:stateaction。当你运行你的 React 应用,那一个措施将赢得它在此以前定义的 initialState,当您 dispatch 三个 action 的实例时,这一个法子将得到当前程象(不再是 initialState卡塔尔。然后,基于那几个actions 的从头到尾的经过,reducer 方法将为您的使用生成贰个新的情形。

接下去,你供给定义这个 actions 做什么。实际上,为了轻松起见,你将定义八个单纯的 action ,当客商在您的选用中输入搜索词时,这几个 action 会被触发。由此,张开 actions.js 文件,并在内部插入以下代码:

function searchTermChanged(searchTerm) { return { type: 'SEARCH_INPUT_CHANGED', payload: {searchTerm}, }; } export default { searchTermChanged, };

1
2
3
4
5
6
7
8
9
10
function searchTermChanged(searchTerm) {
  return {
    type: 'SEARCH_INPUT_CHANGED',
    payload: {searchTerm},
  };
}
 
export default {
  searchTermChanged,
};

action 创制好之后,你供给做的下风度翩翩件事就是将您的 App 组件封装到 react-redux 提供的 Provider 组件中。Provider 统生龙活虎担负 React 应用的数目(即 store)传递。

要利用 provider ,首先,你将运用 reducers.js 中定义的 initialState 创建 store。然后,通过 Provider 组件,你将把 store 传给您的 App。要成功那几个任务,你必得展开 index.js 文件,并将其故事情节替换为:

import React from 'react'; import ReactDOM from 'react-dom'; import {Provider} from 'react-redux'; import {createStore} from 'redux'; import reducers from './reducers'; import App from './App'; // 使用 reducers 新闻创立 store。 // 那是因为 reducers 是 Redux Store 的操纵大旨。 const store = createStore(reducers卡塔尔; ReactDOM.render( <Provider store={store}> <App/> </Provider>, document.getElementById('root'卡塔尔国 卡塔尔国;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import reducers from './reducers';
import App from './App';
 
// 使用 reducers 信息创建 store。
// 这是因为 reducers 是 Redux Store 的控制中心。
const store = createStore(reducers);
 
ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('root')
);

就是那样!你刚刚在 React 应用中配置完 Redux。未来,你一定要完毕 UI (客商分界面卡塔尔(英语:State of Qatar),那样你的客商就可以选择本节中落到实处的效应了。

函数式和面向对象

Redux更加多的是安分守己函数式编制程序(Functional Programming, FP)观念,而Mobx则越多从面相对象角度考虑难题。

Redux提倡编写函数式代码,如reducer正是四个纯函数(pure function),如下:

(state, action) => { return Object.assign({}, state, { ... }) }

1
2
3
4
5
(state, action) => {
  return Object.assign({}, state, {
    ...
  })
}

纯函数,采纳输入,然后输出结果,除却不会有任何影响,也席卷不会影响吸收的参数;对于相近的输入总是输出雷同的结果。

Mobx设计更加多偏向于面向对象编程(OOP)和响应式编制程序(Reactive Programming),日常将气象包装成可观看对象,于是大家就足以行使可观望对象的保有才具,生机勃勃旦状态对象改动,就能够自行获取创新。

改为动态值

直白编码items对于组件来讲不是专程有用,所以最棒从JSON API来fetch items数量,倘使那样做的话,我们就足以把isLoadinghasError改为适当的状态.
响应值和大家直接编码是平等,不过在实际临盆中,你大概会拉回一个图书紧俏榜的列表,最新的blog帖子大概其余app中要求的内容.
为了fetch items,我们将使用极其的Fetch API.Fetch使得实行央求比守旧的XMLHttpRequest更易于,况且再次来到的是响应值的promise对象(那或多或少对此Thunk很关键卡塔尔.Fetch并不是在享有的浏览器中都能够选取,所以您须求在档案的次序中增长重视项.

 npm install whatwg-fetch --save

转移实际上非常简单.

  • 首先把items的早先化state设置为空数组
  • 现今我们抬高贰个艺术fetch数据,同一时间还要设定loading和error的状态.
fetchData(url) {//fetch的包装方法
  //进入函数首先设定isLoading state false=>true
  this.setState({ isLoading: true });
  fetch(url)
      .then((response) => {//返回promise独享
          if (!response.ok) {
              throw Error(response.statusText);
          }
          //不管返回的数据是什么,只要返回数据
          //就修改isLoading state true=>false
          this.setState({ isLoading: false });
          return response;
      })
      .then((response) => response.json())
      .then((items) => this.setState({ items })) 
      // ES6 property value shorthand for { items: items }
      .catch(() => this.setState({ hasErrored: true }));//返回数据的解析为json,如果捕获到错误就hasErrored:
      // false=>true
}
  • 函数写完事后,在组件加载的时候就调用函数
 componentDidMount() {
 this.fetchData('http://      5826ed963900d612000138bd.mockapi.io/items');
}

做到以往,代码如下

 class ItemList extends Component {
   constructor() {
       this.state = {
           items: [],
       };
   }
   fetchData(url) {
       this.setState({ isLoading: true });
       fetch(url)
           .then((response) => {
               if (!response.ok) {
                   throw Error(response.statusText);
               }
               this.setState({ isLoading: false });
               return response;
           })
           .then((response) => response.json())
           .then((items) => this.setState({ items }))
           .catch(() => this.setState({ hasErrored: true }));
   }
   componentDidMount() {
       this.fetchData('http://5826ed963900d612000138bd.mockapi.io/items');
   }
   render() {
   }
}

比相当多了,组件将来从REST API fetch items数量,在4个items达到早前,你期望看”Loading...”现身提示.倘若UCR-VL无法回去数据,你应该见到error 的消息.

不过(译注:讨厌的可是卡塔尔(英语:State of Qatar),在切实可行中,组件不应有包罗具体的fetch逻辑,data也不应该积累在组件的state中,所以Redux实时的产出了.

5、React第三方组件5(状态管理之Redux的运用⑤异步操作卡塔尔国---2018.03.26

改善点

系统重构前,通过 SpeedCurve 进行解析,得出了上边结论:

  • 服务器响应速度比较快
  • HTML文书档案异常的大(页面全部因素都包括个中)
  • 闭塞页面渲染的资源(JavaScript、Stylesheet)相当多
  • 财富读取的次数过多,容量过大

听他们说那几个规定了上边这几项基本主旨:

  • 为了不致于降低服务器响应速度,对代码举办优化,缓存等
  • 尽可能减弱HTML文书档案大小
  • JavaScript异步地加载与执行
  • 先前时代显示页面时,仅仅加载所需的冯谖三窟财富

创建 React 界面

今昔,你早就到位了利用中的大旨代码,你能够小心于营造你的顾客分界面。为此,张开你的 App.js 文件,用下方代码替换它的原委:

import React from 'react'; import {connect} from 'react-redux'; import actions from './actions'; import './App.css'; function App({food, searchTerm, searchTermChanged}) { return ( <div> <div className="search"> <input type="text" name="search" placeholder="Search" value={searchTerm} onChange={e => searchTermChanged(e.target.value)} /> </div> <table> <thead> <tr> <th>Name</th> <th>Origin</th> <th>Continent</th> </tr> </thead> <tbody> {food.map(theFood => ( <tr key={theFood.name}> <td>{theFood.name}</td> <td>{theFood.origin}</td> <td>{theFood.continent}</td> </tr> ))} </tbody> </table> </div> ); } export default connect(store => store, actions)(App);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React from 'react';
import {connect} from 'react-redux';
import actions from './actions';
import './App.css';
 
function App({food, searchTerm, searchTermChanged}) {
  return (
    <div>
      <div className="search">
        <input
          type="text"
          name="search"
          placeholder="Search"
          value={searchTerm}
          onChange={e => searchTermChanged(e.target.value)}
        />
      </div>
      <table>
        <thead>
        <tr>
          <th>Name</th>
          <th>Origin</th>
          <th>Continent</th>
        </tr>
        </thead>
        <tbody>
        {food.map(theFood => (
          <tr key={theFood.name}>
            <td>{theFood.name}</td>
            <td>{theFood.origin}</td>
            <td>{theFood.continent}</td>
          </tr>
        ))}
        </tbody>
      </table>
    </div>
  );
}
 
export default connect(store => store, actions)(App);

对于未用过 Redux 的人来讲,他们唯一不熟稔的是用于封装 App 组件的 connect 方法。那一个点子其实是二个高阶组件( HOC 卡塔尔(英语:State of Qatar),充作应用程序和 Redux 之间的黏连剂。

利用以下命令运行你的接收,你将能够在浏览器中访问你的施用:

npm run start

1
npm run start

唯独,正如你所看到的,那么些利用未来很羞愧。因而,为了让它看起来越来越好一点,你能够展开 App.css 文件,用以下内容替换它的剧情:

table { width: 100%; border-collapse: collapse; margin-top: 15px; line-height: 25px; } th { background-color: #eee; } td, th { text-align: center; } td:first-child { text-align: left; } input { min-width: 300px; border: 1px solid #999; border-radius: 2px; line-height: 25px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  line-height: 25px;
}
 
th {
  background-color: #eee;
}
 
td, th {
  text-align: center;
}
 
td:first-child {
  text-align: left;
}
 
input {
  min-width: 300px;
  border: 1px solid #999;
  border-radius: 2px;
  line-height: 25px;
}

澳门新浦京娱乐场网站 4

完了了!你现在有了二个着力的 React 和 Redux 的利用,能够开头上学怎么着迁移到 Context API 上了。

单一store和多store

store是使用项理数据的地点,在Redux应用中,我们总是将持有分享的应用数据聚焦在二个大的store中,而Mobx则平常按模块将运用状态划分,在多少个独立的store中管理。

转变到Redux

急需增多Redux, React Redux 和Redux Thunk作为依靠项.

 npm install redux react-redux redux-thunk --save

6、React第三方组件5(状态处理之Redux的选拔⑥Redux DevTools卡塔尔(英语:State of Qatar)---2018.03.27

SSR还是SPA

这两天相比较于增添到收藏夹中,客户更赞成于通过寻找结果、推特、Instagram等社交媒体上的享用链接展开博客页面。Google和Facebook(TWT安德拉.US卡塔尔的AMP, Facebook的Instant Article注脚第风度翩翩页的展现速度大幅影响到客户满意度。

其他,从谷歌(Google卡塔尔Analytics等日志记录中打听到在篇章列表页面和上下文章间开展跳转的客商也相当多。那大概是因为博客作为个体媒体,当某生机勃勃客户见到意气风发篇不错的篇章,特别感兴趣的时候,他也还要想看蓬蓬勃勃看同意气风发博客内的任何小说。也正是说,博客这种服务 第大器晚成页火速加载与页面间飞快跳转同等主要

进而,为了让双方都能发挥最棒品质,我们决定在首先页使用服务器端渲染(Server-side Rendering, SS哈弗),从第二页起接收单页面应用(Single Page Application, SPA)。那样一来,不只能确认保障率先页的显得速度和机器可读性(Machine-Readability)(含SEO),又能获得SPA带来的急迅展现速度。

BTW,对于眼下的布局,由于服务器和客商端应用同样的代码,全体拓宽SS凯雷德或是全体进行SPA也是恐怕的。近来已经贯彻就算在不能够运作JavaScript的条件中,也得以平常通过SS翼虎来浏览。能够预言以后等到瑟维斯Worker广泛之后,初始页面将越来越高速化,况兼能够完毕离线浏览。

澳门新浦京娱乐场网站 5

z-ssrspa.png

在此之前的系统完全使用SSTiggo,而前段时间的种类从第二页起变为SPA。

 澳门新浦京娱乐场网站 6

z-spa-speed.gif

SPA的魅力在于展现速度之快。因为独有通过API获取所需的必得数据,所以速度特别快!

使用 React Context API 完毕采取

在本节,你将在学习如何将你的 Redux 应用迁移到 React Context API 上。

侥幸的是,你不供给在 Redux 和 Context API 之间做过多的重构。

首先,你一定要从您的运用中移除 Redux 组件。为此,请张开终端,删除 reduxreact-redux 库:

npm rm redux react-redux

1
npm rm redux react-redux

然后,删除应用中对那个库的引用代码。张开 App.js 删除以下几行:

import {connect} from 'react-redux'; import actions from './actions';

1
2
import {connect} from 'react-redux';
import actions from './actions';

接下来,在长期以来的文书中,用下方的代码替换最终身龙活虎行(以 export default 开端的那生龙活虎行):

export default App;

1
export default App;

透过这个改造,你能够用 Context API 重写你的选用了。

JavaScript对象和可旁观对象

Redux暗中同意以JavaScript原生对象格局积攒数据,而Mobx使用可观望对象:

  1. Redux必要手动追踪全体情况对象的更动;
  2. Mobx中能够监听可观望对象,当其改换时将自动触发监听;

理解Redux

有几个Redux的为主原理,我们必须要要领会(译注:话相当的轻巧,但是要在大脑里营造出Redux的做事流程是有花不菲时日的和生命力的卡塔尔.

  1. Redux中有八个大局state对象来管理整个应用的state.在篇作品中,全局对象便是大家组件的早先化对象.
  2. 唯黄金时代能退换state的是触发三个action,action是贰个陈诉state应该怎么转移的靶子,Action Creators可以被dispatched的函数,触发一个变型,实行的内容是回来二个action
  3. 当一个action被dispatch以后,Reducer推行依照action的始末实在改造state对象,假使action未有找到相称项,就能够回去私下认可的state.
  4. Reducers是纯函数,他们不能有任何的异步操作和mutate-必须要返回一个修改的copy.
  5. 单个的Reducer能够被combine为二个纯净的rootReducer,进而开创贰个离散的state聚合体.
  6. Store是把action和reducer组织到一块的工具,他带有了rootReducer代表的情状,中间件,允许你试行实际的dispatchactions
  7. 为了在React中使用Redux,<Provider />零件封装整个应用,传递store到子代组件们.

付出情形:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

延期加载

咱俩使用SSQashqai SPA的办法来优化页面间跳转这种横向移动的快慢,并且应用延缓加载来改正页面包车型地铁纵向移动速度。生龙活虎开重要表现的内容以至导航,还应该有博客小说等最初显示,在此些内容之下的扶持内容随着页面包车型客车轮转逐步显现。那样一来,主要的内容不会受页面上面内容的熏陶而越来越快的突显出来。对于这么些想尽早读作品的客户来讲,既不扩充客商体验上的压力,又能完好的提供页面下方的剧情。

 澳门新浦京娱乐场网站 7

z-lazyload.png

以前的种类因为将页面内的全部内容都置于HTML文书档案里,所以使得HTML文书档案容积超大。而前天的类别,仅仅将第黄金年代内容放到HTML里重回,裁减了HTML的体量和数量乞求的大小。

从 Redux 迁移到 React Context API

要将事前的接纳从 Redux 驱动的选用调换为利用 Context API,你要求一个context 来存款和储蓄应用的多少(该 context 将替换 Redux Store卡塔尔。别的,你还供给叁个 Context.Provider 组件,该零器件包罗 stateprops 和通常的 React 组件生命周期。

为此,你供给在 src 目录中开创一个 providers.js 文件,并向里面增多以下代码:

import React from 'react'; import Food from './foods'; const DEFAULT_STATE = { allFood: Food, searchTerm: '' }; export const ThemeContext = React.createContext(DEFAULT_STATE); export default class Provider extends React.Component { state = DEFAULT_STATE; searchTermChanged = searchTerm => { this.setState({searchTerm}); }; render() { return ( <ThemeContext.Provider value={{ ...this.state, searchTermChanged: this.searchTermChanged, }}> {this.props.children} </ThemeContext.Provider>); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';
import Food from './foods';
 
const DEFAULT_STATE = { allFood: Food, searchTerm: '' };
 
export const ThemeContext = React.createContext(DEFAULT_STATE);
 
export default class Provider extends React.Component {
  state = DEFAULT_STATE;
  searchTermChanged = searchTerm => {
    this.setState({searchTerm});
  };
 
  render() {
    return (
      <ThemeContext.Provider value={{
        ...this.state,
        searchTermChanged: this.searchTermChanged,
      }}> {this.props.children} </ThemeContext.Provider>);
  }
}

地点代码中定义的 Provider 类负担将其它零器件封装在 ThemeContext.Provider 中。通过如此做,你能够让这几个构件访问应用中的 state 和退换 state 的 searchTermChanged 方法。

若要在组件树中接收这几个值,你须要成立一个 ThemeContext.Consumer 组件。那个组件将急需贰个 render 渲染方法,该方法将接受上述 props 值作为参数。

所以,接下去,你要求在 src 目录中创设四个名称叫 consumer.js 的文书,并将以下代码写入个中:

import React from 'react'; import {ThemeContext} from './providers'; export default class Consumer extends React.Component { render() { const {children} = this.props; return ( <ThemeContext.Consumer> {({allFood, searchTerm, searchTermChanged}) => { const food = searchTerm ? allFood.filter( food => food.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1 ) : allFood; return React.Children.map(children, child => React.cloneElement(child, { food, searchTerm, searchTermChanged, }) ); }} </ThemeContext.Consumer> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from 'react';
import {ThemeContext} from './providers';
 
export default class Consumer extends React.Component {
  render() {
    const {children} = this.props;
 
    return (
      <ThemeContext.Consumer>
        {({allFood, searchTerm, searchTermChanged}) => {
          const food = searchTerm
            ? allFood.filter(
              food =>
                food.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1
            )
            : allFood;
 
          return React.Children.map(children, child =>
            React.cloneElement(child, {
              food,
              searchTerm,
              searchTermChanged,
            })
          );
        }}
      </ThemeContext.Consumer>
    );
  }
}

今后,为了成功搬迁,你将张开 index.js 文件,并在 render() 函数中,用 Consumer 组件封装 App 组件。此外,你要求将 Consumer 包装在 Provider 组件中。代码如下所示:

import React from 'react'; import ReactDOM from 'react-dom'; import Provider from './providers'; import Consumer from './consumer'; import App from './App'; ReactDOM.render( <Provider> <Consumer> <App /> </Consumer> </Provider>, document.getElementById('root') );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';
import ReactDOM from 'react-dom';
import Provider from './providers';
import Consumer from './consumer';
import App from './App';
 
ReactDOM.render(
  <Provider>
    <Consumer>
      <App />
    </Consumer>
  </Provider>,
  document.getElementById('root')
);

打完收工!你恰恰完毕了从 Redux 到 React Context API 的迁徙。假若您今后开发银行你的行使,你会意识一切应用运维平常。独一不一致的是,你的使用不再动用 Redux 了。

“新扩张的 React Context API 在回退应用容积方面是 Redux 的佳绩取代品。”

不可变(Immutable)和可变(Mutable)

Redux状态对象经常是不可变的(Immutable):

switch (action.type) { case REQUEST_POST: return Object.assign({}, state, { post: action.payload.post }); default: retur nstate; }

1
2
3
4
5
6
7
8
switch (action.type) {
  case REQUEST_POST:
    return Object.assign({}, state, {
      post: action.payload.post
    });
  default:
    retur nstate;
}

大家不可能直接操作意况对象,而连续几日在原本状态对象根底上回来三个新的情状对象,那样就能够很有益的回来应用上意气风发情景;而Mobx中能够直接采取新值更新意况对象。

布置大家的state

从大家后天已部分代码里,可以预知我们的state要求3特特性(properties卡塔尔(英语:State of Qatar):items,hasErrored,isLoading,这一个多少个属性相应的内需八个独立的actions.

最近,这里讲讲怎么Action Creator和Action是例外的,他们亦非1:1的关系:我们需求第多个actiong creator来依据fetch data的不等情状调用别的五个action(creators卡塔尔国.这第多少个action creator差不离和我们原本的fetchData()如出豆蔻梢头辙,可是它不会一贯的应用this.setState({isLoading:true})来设置情状,大家将dispatch叁个action去做相像的事情:dispatch(isLoading(true)).

这里大家需求用到 redux-thunk

HTML缓存

博客随笔是静态文书档案,对于特定U瑞虎L的乞请会回到固定的从头到尾的经过,因而特别符合实行缓存。缓存使得服务器管理内容减弱,在压实页面响应速度的还要缓解了服务器的承当。大家将不改变的开始和结果(小说等)生成的HTML进行缓存重返,对于由于变化的剧情约财富过JavaScript、CSS等开展操作(比如显示、隐讳等)。

 澳门新浦京娱乐场网站 8

z-newrelic-entrylist.png

那张图突显了二〇一四年10月最后一周New relic上的总括数据。小说列表页面包车型大巴HTML的响适当时候间基本在50ms以下。

 澳门新浦京娱乐场网站 9

z-newrelic-entry.png

那张图是小说详细页面包车型大巴总括数据。可以看看,那么些页面包车型大巴响适那时候候间也大都以在50ms以下。由于存在小说过长的时候会导致页面容积变大,以致小说页面不可能完全缓存等景色,所以相比列表页面会设有越多极慢的响应。

对于因央浼的顾客端而发出变化部分的管理,大家在HTML的body标签中通过参预相应的class,然后在顾客端通过JavaScript和CSS等展开操作。比方,一些内容不想在少数操作系统上呈现,大家就用CSS对那么些剧情开展隐讳。由于CSS样式表会先载入,页面布局鲜明下来之后再扩充页面渲染,所以这些也得以化解前边要涉及的「咯噔」难点。

<!-- html --> <body class="OsAndroid">

1
2
3
<!-- html -->
 
<body class="OsAndroid">

CSS

/* main.css */ body.OsAndroid .BannerForIos { dsplay: none; }

1
2
3
4
5
/* main.css */
 
body.OsAndroid .BannerForIos {
  dsplay: none;
}

题外话:使用 Auth0 让你的 React 应用更安全

原来的小说中有至于 Auth0 使用的详实教程,但译者以为这里内容和本文核心关系非常的小,故不作翻译。感兴趣者可活动原文翻阅该有的内容。

mobx-react和react-redux

利用Redux和React应用连接时,供给采用react-redux提供的Providerconnect

  1. Provider:负责将Store注入React应用;
  2. connect:肩负将store state注入容器组件,并接纳特定情景作为容器组件props传递;

对此Mobx来说,相像须求八个步骤:

  1. Provider:使用mobx-react提供的Provider将具有stores注入应用;
  2. 使用inject将一定store注入某零件,store能够传递状态或action;然后使用observer确认保障组件能响应store中的可观看对象(observable)改变,即store更新,组件视图响应式更新。

创建actions

在actions目录下成立itmes.js文件,在那之中富含大家的action creators.创制四个轻便的actions.

    export function itemsHasErrored(bool) {
   return {
       type: 'ITEMS_HAS_ERRORED',
       hasErrored: bool
   };
}
export function itemsIsLoading(bool) {
   return {
       type: 'ITEMS_IS_LOADING',
       isLoading: bool
   };
}
export function itemsFetchDataSuccess(items) {
   return {
       type: 'ITEMS_FETCH_DATA_SUCCESS',
       items
   };
}


    ```











如前面提到的,action creators似能返回函数的函数,使用`export`输出单个action creators,便于在代码中使用.
   第二个action creators接受一个布尔值(true/false)最为参数,返回一个有意义的`type`和布尔值,分配合适的属性.
   第三个,`itemsFetchSuccess()`,当数据成功返回以后,传递数据作为`items`属性的值.通过ES6的魔术属性缩写,我们能够返回一个对象含有属性名叫做`items`,他的值是`items`的数组.

  (Note: that the value you use for type and the name of the other property that is returned is important, because you will re-use them in your reducers)这一句不知道怎么翻译.
  现在,我们有了三个actions,代表我们的状态,把原来的组件方法`fetchData`该给`itemFetchDaga()`action creator.
  默认情况下,Redux action creators是不支持异步actions的,像是fetching data的操作,所以这里我们使用Redux Thunk.Thunk允许你在action creator里返回一个函数代替实际的action.内部函数接受`dispatch`和`getState`作为参数,但是我们仅仅使用`dispatch`.
  实际的简单例子中五秒以后将会触发`itemHasErrored()`函数.


export function errorAfterFiveSeconds() {
// We return a function instead of an action object
//dispatch作为参数传递给胖箭头函数
return (dispatch) => {
    setTimeout(() => {
        // This function is able to dispatch other action creators
        dispatch(itemsHasErrored(true));
    }, 5000);
};

}

现在我们知道thunk是什么了.编写`itemsFetchData()`.

export function itemsFetchData(url) {
return (dispatch) => {
    //已进入fetchdata,按顺序把isLoading state 由
    // false=>true
    dispatch(itemsIsLoading(true));
    //fetch执行实际的异步远程获取数据操作
    fetch(url) 
        .then((response) => {
            if (!response.ok) {//根据状态抛出错误
                throw Error(response.statusText);
            }
            //isLoading又改为false,加载Loading组件
            dispatch(itemsIsLoading(false));
            return response;
        })
        .then((response) => response.json())
        .then((items) => dispatch(itemsFetchDataSuccess(items)))
        .catch(() => 
        dispatch(itemsHasErrored(true)));
        //捕获错误以后HasError的状态 false=>true
};

}

## 创建我们的reducers

action定义好了以后,可以编写reducers接受actions,接着返回appliction的新状态(译注:实际上store中返回的对象都是一个新的对象,不是原对象的引用,这个就叫做immutable,facebook定义了一个immutable.js的技术实际是也是返回一个新的对象的硬拷贝,但是在原对象和修改对象之间共享了一部分内容,这一点有点微妙).
注意:在Redux中,所有的reducers不考虑action,都会调用,所以即就是没有action被应用,你也必须要返回一个原来的定义的`state`.

每一个reducer接收两个参数,之前的state和一个`action`对象.也可以使用ES6的属性来调用默认的参数设定到默认的`初始化state`.

在每个reducer内部,使用`switch`申明来决定到底哪个`action.type`相匹配.如果是简单的reducer,可能没有必要使用`switch`,理论上使用`if/else`可能更快一点.

如果`action.type`一点匹配,然后会返回和`action`相关的属性.和前面提到的一样,`type`和`action[属性名]`是在action creators里定义的.

好啦,了解到这些内容,在`reducers/item.js`中创建items reducers

export function itemsHasErrored(state = false, action) {
switch (action.type) {
case 'ITEMS_HAS_ERRORED':
return action.hasErrored;
default:
return state;
}
}
export function itemsIsLoading(state = false, action) {
switch (action.type) {
case 'ITEMS_IS_LOADING':
return action.isLoading;
default:
return state;
}
}
export function items(state = [], action) {
switch (action.type) {
case 'ITEMS_FETCH_DATA_SUCCESS':
return action.items;
default:
return state;
}
}

注意reducer根据结果store的state属性来命名,`action.type`没有必要想对应.前两个表达完整的意思,第三个`items()`就稍微有点不同.

这是因为,可能会有很多条件返回`items`数组:有可能返回所有的数组,有可能在删除dispatch以后返回`items`的次级结构.或者所有的items都被删除了,会返回一个空数组.

为了重新遍历,每一个reducer都会返回一个截然不同的state属性,不需要考虑reducer内部的条件到底有多少.刚开始花了我很长时间想明白这个问题.
单个的reducers创建好了以后,我们需要把单个的reducer合并(combine)成一个`rootReducer`,创建单一对象.

创建文件`reducers/index.js`

import { combineReducers } from 'redux';
import { items, itemsHasErrored, itemsIsLoading } from './items';
//由于各种reducer再次来到的都以贰个目的
//所以这里的操作就是统后生可畏对象的操作,在underscore和loadsh
//里面能够找到合并js对象的代码
export default combineReducers({
items,
itemsHasErrored,
itemsIsLoading
});

我们从`items`里导入每个reducers,使用redux的`combineReducers()`函数来合并输出单一对象(译注:所以每一个reducer返回的对象的属性名应该是唯一的,否则就覆盖了,前面的内容表达过这个意思)
因为我们的reducer的名字和在store中使用的属性名一样,所以我们可以使用ES6的对象字面量.

注意,我有意提到了reducer的前缀,所以当我们的application变得比较复杂的时候,不能出现全局性的`hasErrored`和`isLoading`属性.可以使用不同的error和loading state,所以前缀可以给你很大的灵活性.例如

import { combineReducers } from 'redux';

import { items, itemsHasErrored, itemsIsLoading } from './items';
import { posts, postsHasErrored, postsIsLoading } from './posts';
export default combineReducers({
items,
itemsHasErrored,
itemsIsLoading,
posts,
postsHasErrored,
postsIsLoading
});

替代方法是,可以在import的时候使用别名.但是我更愿意使用独一无二的名字.

## 配置store,注入到你的app中

操作很直接,创建`store/configureStore.js`

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';
export default function configureStore(initialState) {
return createStore(
rootReducer,
initialState,
applyMiddleware(thunk)
);
}

现在在index.js中包含`<Provider />`组件,`configureStore`,配置`store`.包装app(`<ItemList />`),传递进去`store`和`props`.

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import ItemList from './components/ItemList';
const store = configureStore(); // You can also pass in an initialState here
render(
<Provider store={store}>
<ItemList />
</Provider>,
document.getElementById('app')
);

我知道,其实花了很多努力才到了这一步,但是随着设置的完成,我们就可以使用配置来操纵我们的组件了(译注:这里是意译,组件又称为木偶组件,意思很清楚吧?谁是拿着吊线的人呢?就是redux).

## 把组件转化为使用Redux store和方法

跳回到`components/ItemList.js`

在顶部导入需要的部分

import { connect } from 'react-redux';
import { itemsFetchData } from '../actions/items';

`connect`可以让组件链接到Redux的store,`itemsFetchData`是在开始写的action creator.我们仅仅需要导入actin creator.使用`dispatch`来触发actions.(译注:redux里面有很多内容其实是很基础的,例如这里,javascript的函数是一类对象,在js中函数是传引用的,所以函数名可以作为函数的引用,通过另一函数的参数来传递. 厉害 
		

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站:轻易管理状态,Redux构建