[译】Redux入门教程（一）

前言

老外写技术文章真是叼，这是国外的一个程序员写的一个简单易懂,按部就班的Redux教程，本着共享的精神，就翻译出来给你们一块儿看，文章最后有连接，不想看我翻译的直接去看原文吧。

下面是原教程的英文目录

这篇先更三分之一左右，若是小伙伴们喜欢的话，我再更剩下的，若是没人看，我没动力更啊

开始享受你的阅读之旅吧!

本次更新目录

• 1. 谁适合学习这篇指南
• 2. 你将会学到什么
• 3. 一个小型的React开发环境
• 4. 什么是state
• 5. Redux解决了什么问题
• 6. 为何你应该学习Redux
• 7. 你应该使用Redux吗
• 8. 开始认识Redux的store
• 9. 开始认识Redux的reducers
• 10. 开始认识Redux的actions

正文

当我第一次学习Redux的时候，我但愿找到最简单的教程。

尽管网上有大量的教程，我却依然没法理解Redux的一些概念

我知道什么是state, 可是ations, creators, 和reducers又是什么呢?我对此一头雾水

最重要的是，我依然不知道怎么将React和Redux结合起来

这些天，我开始写我本身的Redux教程，所以，我也学到了不少， 经过写这个指南，我自学了Redux的基础，我但愿这份教程能够帮助到那些想要学习React和Redux的人

谁适合学习这篇指南

下面的Redux教程正是为这些人准备的：

• 你已经很好地掌握了Javascript, ES6和React
• 你指望用最简单的方式学会Redux

你将会学到什么

接下来的指南中你将会学到:

1. 什么是Redux
2. 怎样在React中使用Redux

一个小型的React开发环境

在开始以前，肯定你有一个React的开发环境

你能够参照我另一篇教程如何搭建React, webpack, 和Babel环境, 或者你也能够用create-react-app脚手架来搭建

什么是state

为了理解Redux，你必选先理解state

若是你以前使用过React, 那么你对state这个术语就不会陌生了

好比你以前已经写过相似于下面的有状态的React组件：

import React, { Component } from "react";
class ExampleComponent extends Component {
  constructor() {
    super();
    this.state = {
      articles: [
        { title: "React Redux Tutorial for Beginners", id: 1 },
        { title: "Redux e React: cos'è Redux e come usarlo con React", id: 2 }
      ]
    };
  }
  render() {
    const { articles } = this.state;
    return <ul>{articles.map(el => <li key={el.id}>{el.title}</li>)}</ul>;
  }
}
复制代码

一个有状态的React组件是一个javascrit的ES6的类class

每一个有状态的React组件有它本身的状态

在React组件中，状态state管理数据，组件可能将数据渲染，显示给用户

状态在响应行为和事件的时候可能会发生变化， 在React中，组件能够经过setState更新本身的状态

可是，状态究竟是什么，这个术语state并无绑定在React中，状态一直在你身边，即便最简单的JavaScript应用都有状态，考虑下面的例子：

用户点击了一个按钮

最上层出现了一个弹框

看看，在这个微不足道的交互中就有一个状态，咱们必须处理

咱们能够用一个JavaScript 对象来描述初始状态

var state = {
  buttonClicked: 'no',
  modalOpen: 'no'
}
复制代码

当用户点击按钮以后，这个对象就变成了

var state = {
  buttonClicked: 'yes',
  modalOpen: 'yes'
}
复制代码

除了将这些状态储存在一个对象中，你如何跟踪JavaScript的这些状态？是否有一个库能够帮咱们更可靠地追踪这些状态？

Redux解决了什么问题

一个典型的Javascript应用充满了状态， 例如：

• 用户看到了什么（data）
• 咱们在获取什么数据
• 咱们展现给用户的url是什么
• 在页面里面选中了哪些条目
• 应用中是否有错误？这个也是状态

状态在Javascript中无处不在， 你能够想象一下一个React应用有多少状态吗？

固然，只要你的应用一直保持很小，你能够用一个父组件来维持这些状态，可是当你给你的应用添加更多行为的时候，事情就变得棘手了。

有时候，咱们可能但愿持续地跟踪而且获取到状态的变化，可是，前端开发者不该该处理这个业务逻辑， 因此还有什么可选方案来管理React组件的状态呢？

** Redux**就是其中之一 Redux解决了一个刚开始的时候可能不那么明显的难题，它给了每一个React组件所须要的状态

Redux在一个地方维持状态

固然，使用Redux, 获取和管理状态就独立于React以外了, 这种方式的好处刚开始可能不是那么明显，当你愈来愈了解Redux的时候，好处就会变得愈来愈清晰

接下来，咱们来看看你为何应该学习Redux以及何时应该在你的应用中使用Redux，首先先来了解为何你应该学习Redux

为何你应该学习Redux

你是否想学习Redux可是殊不知从何学起，Redux让大多数开始学习的人望而却步，可是你不该该被吓到，Redux并无那么难，关键是：不要急着去学Redux，除非你对此有目标和热情，你才应该开始学习它

别着急， 我开始学习Redux是由于：

• 我有百分百的兴趣了解Redux的工做原理
• 我迫切地但愿提升个人React技能
• React和Redux结合是十分广泛的
• Redux是通用独立的框架，一旦学会了，能够处处使用(vue, Angular)

那么，Redux是一个好的汇报吗？状态遍及在Javascript应用中，因此状态管理在JavaScript 中一直是个未解决的难题

另外一个事实就是：真正的JavaScript应用大多数都是使用状态管理库

那么Redux在将来会消失吗？ 有这种可能，可是这种模式将会长存，它对你前端开发事业极为宝贵

最后，学习Redux或者相关的状态管理库是必须的，即便学习曲线很陡峭

你应该使用Redux吗

使用Redux,Flux或者Mobx来管理状态彻底取决于你

可能你根本不须要这些库，使用它们的代价就是，他们在你的应用中加了一层抽象

可是我更倾向于认为Redux是一个有用的投资，而不是成本

另一个开始学习Redux的人常见的问题就是：怎么知道何时你的应用须要使用Redux？

若是你认为没有不二法则来肯定你何时须要使用Redux来管理状态， Redux也给JavaScript开发者提供了不少便利， 调试，action重放等等

当我开始一个React项目的时候，我老是控制不住直接将Redux加入到项目中，可是做为开发者，咱们可能就会让代码臃肿了

因此，何时你猜应该将Redux添加到你的项目中？

在挑选Redux以前，先花点时间来探索下可选的模式， 特别是须要深刻理解React的state和props

Dave Ceddia有一篇很好的文章children props as an alternative before reaching for Redux，里面有不少关于用子组件的props来做为Redux代替方案的看法

不要忘记就算以后添加了Redux , React项目也能够很容易地被重构

我总结的你须要考虑使用Redux的状况以下：

• 不少React组件须要获取一样的状态，可是没有任何父子关系
• 用props一层层往下传递状态给多个组件 让你棘手了

不用担忧，若是上面的状况对你没有任何意义，Dan Abramov曾经说过，“Flux就是眼镜同样，当你须要他们的时候你会知道的”

在进一步深刻以前，你须要花店时间理解Redux解决了什么问题以及你是否有动力去学习它

注意，Redux对小型应用没有那么游泳，在大型应用中它才会大放光彩，不管如何， 即便你当前不是在开发大型应用，学习Redux也不会有坏处

接下来，咱们将开始介绍一些概念

• Redux基本原则
• Redux和React结合

再一次重申，肯定你搭建好了React的开发环境：你能够跟着 How to set up React, webpack, and Babel这个教程来，或者使用create-react-app脚手架来搭建

开始认识Redux的store

Actions, Reducers,我对这些仍是有几分了解的，可是有件事我不明白：这些东西是怎么聚合在一块儿的？

在Redux中store精心安排了全部的东西，和我重复一遍：store

store对于Redux来讲就像人的大脑同样：它是某种魔法

Redux的store是根基性的东西，整个应用的状态存在store之中

转到你的React开发环境，安装Redux:

npm i redux --save-dev
复制代码

为store建立一个目录

mkdir -p src/js/store
复制代码

在src/js/store中建立一个新文件index.js，初始化store

// src/js/store/index.js
import { createStore } from "redux";
import rootReducer from "../reducers/index";
const store = createStore(rootReducer);
export default store;
复制代码

从上面的代码你能够看出，store是createStore的返回结果，createStore是一个函数，来自redux库

createStore接受一个reducer做为第一个参数，所以咱们传递了rootReducer

你也能够传递一个初始的state给createStore ，这对服务端渲染有用，可是如今咱们没必要关心这个

最重要的概念就是redux的state来自于reducers,咱们再说的清楚点，reducers产生你应用的状态

了解了这个，咱们能够继续学习咱们的第一个Redux reducer了

开始认识Redux的reducers

尽管初始的state对服务端渲染有用，在Redux中，state必须从reducers中返回

那么什么是reducer呢？

一个reducer是一个JavaScript函数，一个reducer函数接收两个参数： 当前的state和一个action(立刻咱们会介绍更多关于action的东西)

在一个日常的React组件中，本地的状态变化是经过setState来改变的， 然而，在Redux中，你不能够这么作。 Redux的第三个原则是state是不可变的，而且不能改变他们

这就是为何reducer必须是纯函数，一个纯函数是对于一个特定输入老是会返回一样输出的函数

建立一个reducer并不难，它仅仅是一个有两个参数的JavaScript函数

在咱们的示例中，咱们将会建立一个简单的reducer,它接受初始的state做为第一个参数，至于第二个参数，咱们提供一个action,如今reducer除了返回初始的state什么都不会作

为根reducer建立一个目录

mkdir -p src/js/reducers
复制代码

接着在src/js/reducers里面建立一个index.js文件

// src/js/reducers/index.js
const initialState = {
  articles: []
};
function rootReducer(state = initialState, action) {
  return state;
};
export default rootReducer;
复制代码

我承诺保证这篇指南尽量地简单，这就是为何咱们的第一个reducer很傻了：它返回初始的state，除此以外，就什么都没作了

注意初始的state是怎么做为一个默认参数传递的

在接下来的章节中，咱们将在里面添加一个action， 在这里事情就会变得有趣了

开始认识Redux的actions

毫无疑问，reducers是Redux最重要的概念**，reducers产生应用的状态**

可是一个reducer是怎么知道何时产生下一个状态呢？

Redux的第二个原则就是改变的状态的惟一方法是发送信号给store, 这个信号就是一个action, 派发action就是一个发送信号的过程

如今，你怎么改变一个不可变的state,你作不到的，新产生的state是当前state添加了新数据后的一个副本，前一个state根本没发生变化

这就是你须要知道的东西

要明白，Redux的action仅仅是JavaScript对象，下面是一个action

{
  type: 'ADD_ARTICLE',
  payload: { title: 'React Redux Tutorial', id: 1 }
}
复制代码

每一个action须要一个type属性来描述状态怎样变化

你也能够申明一个payload,在上面的例子中，payload是一个新文章article，随后一个reducer将会将这个新文章添加到当前的state

最佳的实践是在一个函数里面包裹每一个action, 这种函数就叫action creator

如今经过建立一个简单的Redux 的action,咱们能够把全部的东西都整合在一块儿了

为actions建立一个目录

mkdir -p src/js/actions
复制代码

而后在这个目录里面建立index.js文件

// src/js/actions/index.js
export function addArticle(payload) {
  return { type: "ADD_ARTICLE", payload }
};
复制代码

type属性仅仅是一个字符串而已

reducer将会使用这个字符串来肯定怎么计算出下一个state

因为字符串很容易打印出错和重复，所以将action的type申明为常量更好

这种方式能够避免很难调试的错误

建立一个新目录

mkdir -p src/js/constants
复制代码

而后在这个目录里面建立一个action-types.js文件

// src/js/constants/action-types.js
export const ADD_ARTICLE = "ADD_ARTICLE";
复制代码

如今打开src/js/actions/index.js， 而且使用action types来更新action

import { ADD_ARTICLE } from "../constants/action-types";
export function addArticle(payload) {
  return { type: ADD_ARTICLE, payload };
}
复制代码

咱们还差一步就能够拥有一个能够运行的Redux应用了，让咱们来重构咱们的reducer！

---

华丽的风格线，哈哈 本篇内容翻译完毕，溜了，肚子饿的呱呱叫了。

附上原文连接 www.valentinog.com/blog/redux/