博客

50 人左右的小组已满员，不能再申请加入了。

小组任务：从头开始完成一个网站。少扯淡，多学习。有任务，必须完成。不答疑，只交流特定主题。凭宁皓网用户名 + 订单号验证加入 QQ 群：177757910（验证信息填写您在宁皓网的用户名 + 订单号，比如 zhangsan-2610）。

要做的是一个商业网站，这种网站的主要功能就是展示内容，给用户讲故事，让潜在用户成为网站提供的产品与服务的真实用户。这种网站的需求量很大，任何个人，组织，公司都有可能要展示产品与服务并且销售出去，这里说的销售不一定非得是钱的交易，销售的可以是一个点子，一种思想。

如果你是宁皓网的付费会员，并且对这种商业网站有兴趣，加入这个学习小组。

Redux 应用里的数据流是单向的。数据的生命周期有四个阶段：

1. 调用 store.dispatch(action).

   一个动作就是一个纯对象，描述了发生的事情，比如：

    { type: 'LIKE_ARTICLE', articleId: 42 }
    { type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } }
    { type: 'ADD_TODO', text: 'Read the Redux docs.' }
   

   把动作想成是一些简要的新闻： “Mary liked article 42.” ， “‘Read the Redux docs.' was added to the list of todos.”。在应用的任何地方你可以调用 store.dispatch(action)，包括组件，XHR 回调等等。

Redux 应用里的 Actions 表示在应用里发生的事情，Reducers 会根据发生的事情去更新应用的状态。再来了解一下 Store。

Store 的主要任务是：

1. 持有应用的状态。
2. 允许访问状态：getState()。
3. 允许更新状态：dispatch(action)。
4. 注册监听器：subscribe(listener)。
5. 用 subscribe(listener) 返回的东西，可以注销监听器。

注意在 Redux 应用里只有一个 Store。如果想分离数据处理逻辑，可以使用组合 Reducer 的方式。

有了 Reducer ，很容易用它去创建一个 Store 。之前我们用 combineReducers() 把几个 Reducer 组合成了一个，现在我们可以去导入它，然后把它交给 createStore()。

挑战一下刚学完 CSS 的朋友，如果你不知道下一步去做什么，我建议你可以模仿一些页面，不过也得小心，不要去模仿不好的设计。我找到一个页面设计非常适合初学者去模仿。

Actions 描述了在应用里面发生的事情，但是应用的状态（state）具体应该怎么样响应这些动作是 Reducers 的任务。

设计状态

state（状态），指的就是数据。在 Redux 里，应用的所有的状态都会存储在唯一的一个对象里。写代码之前最好先想想这个对象的形状。

比如我们的任务列表应用，会存储两种东西：

1. 当前所选的可见性过滤器
2. 任务列表项目

在状态树里会存储数据还有一些 UI（界面） 状态，最好让数据与 UI 状态分开。

动作（Actions）。在 Redux 的动作里会带着发送给 Store 的信息，动作是 Store 的唯一信息来源，可以使用 store.dispatch() 把动作发送给 Store。

下面就是一个动作，这个动作表示的是添加新的任务项目（假设这个动作来自一个任务列表应用）：

const ADD_TODO = 'ADD_TODO'

{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}

动作其实就是一个 JavaScript 对象，它里面必须得有个 type 属性，这个属性表示的是要执行的动作的类型，也就是在你的应用里会发生的一些事情。一般这个类型的值是一个字符串恒量，但这并不是必须的，你可以直接使用一个普通的字符串表示动作，但是对于大型应用来说，让动作的名字使用恒量是有好处的。在动作对象里，除了必须的 type 属性以外，你可以在这个对象里放任何东西。你可以参考 Flux Standard Action ，学习动作的结构。

​学会自定义 Drupal 上的表格还有文本框的样式，了解 Drupal 的文件与图像。再看点关于函数式编程的东西。

你可以创建 JavaScript 模块，在模块里你可以导出需要导出的东西，然后在其它的地方，你可以导入模块提供的东西。

创建模块

创建一个模块，可以放在一个单独的 js 文件里，比如 talk.js：

let greeting = 'hello'

export { greeting }

现在，talk.js 就是一个模块，导出模块里的东西使用的是 export ，这里我们导出来变量 greeting 。

使用模块

使用模块就是导入模块提供的东西，创建一个 js 文件，名字是 index.js，在这个文件里：

import { greeting } from './talk'

console.log(greeting)

执行上面的代码，会在控制台上输出 “hello”，这个值是在 talk 模块里导出的 greeting 表示的东西。在 index.js 里，我们用 import 导入了 talk 模块里导出的 greeting 。

你写了几行 JavaScript 代码，放到浏览器上就能去运行，这是因为浏览器里面都有一个处理 JavaScript 语言的引擎。不同的浏览器使用的引擎可能不太一样，比如 Chrome 浏览器用的就是 Google 研究出来的 JavaScript 引擎。这套引擎不仅被放到了 Chrome 浏览器里，还可以被放在服务器上，也就是 Node.js。

因为处理 JavaScript 用的引擎不仅是只有 Google 的，还有其它的公司或者组织做的 JavaScript 引擎，这就需要大家坐在一起商量出一套规范。不然我们写的 JavaScript 代码，在不同环境下的运行结果可能就不一致了，我们可能要分别为 Chrome，IE，Firefox 各自去写一套 JavaScript 代码。对于我们开发者来说，谁都不喜欢这样。我们想要的是自己的 JavaScript 代码在任何支持运行 JavaScript 的环境下的运行结果都是一样的。

箭头函数在 JavaScript 里面，是 ES6（ES2015）才加入进来的。因为函数里有个像箭头一样的符号：=>，所以叫箭头函数，英文经常也会称为 Fat arrow functions，胖乎乎的箭头函数。这种函数也称为 lambda 表达式。箭头函数不能当作构造函数使用。

语法

一个箭头函数看起来像这样：

const greet = () => hello

箭头（=>）左边是函数的参数，如果函数没有参数，要使用一组空白的括号，如果函数只有一个参数，这个参数的周围可以不用括号，如果有多少参数，这些参数要放在一组括号里，中间用逗号分隔开。

箭头右边是函数的主体部分，上面这个函数的主体只有一行，所以可以直接把主体放在箭头的右边，箭头函数会自动返回这种单行的主体的结果，也就是你不需要明确的使用 return 关键词返回值。如果函数的主体是多行的，可以把主体部分放在一组大括号里（{  }）。

单个参数

const greet = name => `hello, ${name}`

name 是 greet 这个箭头函数的一个参数，因为函数只有一个参数，所以它的周围不需要添加括号。