Redux入门教程

老外写技术文章真是叼，这是国外的一个 程序员 写的一个简单易懂,循序渐进的Redux教程，本着共享的精神，就翻译出来给大家一起看，文章最后有链接，不想看我翻译的直接去看原文吧。

下面是原教程的英文目录

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

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

本次更新目录

• 1. 谁适合学习这篇指南
• 3. 一个小型的React开发环境
• 5. Redux解决了什么问题
• 6. 为什么你应该学习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/