前言
老外写技术文章真是叼，这是国外的一个程序员写的一个简单易懂,循序渐进的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
你将会学到什么
接下来的指南中你将会学到:
- 什么是Redux
- 怎样在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！
华丽的风格线，哈哈 本篇内容翻译完毕，溜了，肚子饿的呱呱叫了。
