博客

这么多年一直不太了解会员的情况，比如他们在宁皓学到了什么，去了哪里，做了什么。这让我有点惭愧。今天收到一位会员的微信，说要聊点事情。我们用语音聊了将近一个小时，感觉非常地亲切。我也非常开心，得知他去了一家上海挺有名气的 Drupal 公司。更让我兴奋的是，他是远程办公（Remote）。我跟他说，如果我决定做强，也想实施远程办公。

他人在广西，平时除了正常的工作，周末还会在一所职业学院里教书。一开始，教一些前端的东西，后来得知学校要开 CMS 开发课程，就申请了，后来他把 Drupal 引入了这所高校。我说这所学校的学生有福气啊。

两年前他成为宁皓网的会员，学习了 Drupal，他把 Drupal 引入学校，又入职一家专做 Drupal 的公司，而且是远程办公。这让我感到很幸福。其实他跟我联系的主要目的是合作开发一套系统化的课程给他们的学生，因为这家上海的公司想在全国推广 Drupal 。他们非常重视对 Drupal 人才的培养，最近也在公司内部开了对外的培训班。

我们一起学了很多，有时又会感觉什么也没学到，有天我听了一个广播受到点启发，这种迷惘地感觉其实是因为没有目标，没有终点，因为学习本身就是一件没有终点的事儿。我想我们可以阶段性地定一些目标，然后完成，这样感觉会好一些，可以验证所学，也可以接受一些挑战。

先从一个商业网站开始吧，功能不会太难，需求又很大，又可以很好地展示网站从设计到开发再到部署的整个过程。我觉得商业网站的主要任务就是去讲故事给目标客户听，让他们了解，接受，使用网站提供的产品与服务，这其实也是任何网站与应用都需要有的功能。

模仿

为了更真实一点，开始我想假装某国际公司找到我们，要求设计与开发一个网站。我还我问过一位在上海某家 Web 开发机构工作的大哥，咨询他想要做的这个网站的报价，如果是机构做的话，大概 30 万左右，个人做大概是 8 万左右。我给这家公司发了邮件，请求使用他们网站的图片与文字。对方非常客气地拒绝了。所以，我们得低调点，偷偷地用一小部分。

我尽量让网站的设计与开发更普遍化，因为大部分商业网站或者说任何网站都有一些共用的东西：导航，幻灯片，图文列表，产品页面 ...   所以不管你以后是不是要做商业网站，也可以学到一些你需要的东西。

我们一起学了很多，有时又会感觉什么也没学到，有天我听了一个广播受到点启发，这种迷惘地感觉其实是因为没有目标，没有终点，因为学习本身就是一件没有终点的事儿。我想我们可以阶段性地定一些目标，然后完成，这样感觉会好一些，可以验证所学，也可以接受一些挑战。

组织 CSS 样式的方法挺多的，这些方法可以让你更好的去创建与管理 CSS 样式。这些方法都有自己的名字，BEM 就是一种组织 CSS 样式的方法。B（Block）E（Element）M（Modifier），区块__元素--修饰符。

比如你想为下面这块代码添加 CSS 样式：

 <ul>
   <li>item 1</li>
   <li>item 2</li>
 </ul>

CSS 样式看起来可能像这样：

ul {
  list-style: none;
}

ul li {
  margin-bottom: 16px;
}

在上面的样式里，我用了后代选择器（Descendant selectors），ul li 表示的是，找到所有的 li 标签，这个标签在 ul 标签里面。

如果用 BEM 的方式去创建这块样式，应该像这样：

.list {
  list-style: none;
}

.list__item {
  margin-bottom: 16px;
}

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 ，学习动作的结构。