Redux：例子分析 Async

概况

例子源代码：https://github.com/reactjs/redux/tree/master/examples/async
运行之后的效果：

可以看到，基本上可以分为上下两个部分。上面部分是一个下拉框，从中可以选择想要显示项目，下面部分在没有完全得到数据之前，显示“Loading…”，得到数据之后，显示对应的内容，以及获取内容的时间，和一个用于刷新的按钮。
如果想要显示最初的“Loading…”效果，它对应的HTML可以写成这样：

<div data-reactroot="">
    <span>
        <h1>reactjs</h1>
        <select>
            <option value="reactjs">reactjs</option>
            <option value="frontend">frontend</option>
        </select>
    </span>
    <h2>Loading...</h2>
</div>

而获得结果之后的HTML可以是这样：

<div data-reactroot="">
    <span>
        <h1>reactjs</h1>
        <select>
            <option value="reactjs">reactjs</option>
            <option value="frontend">frontend</option>
        </select>
    </span>
    <p>
        <span>
            Last updated at 下午3:23:38
        </span>
        <button>Refresh</button>
    </p>
    <div>
        <ul>
            <li>Beginner's Thread / Easy Questions (February 2018)</li>
            <li>React's new Context API</li>
            <li>Build a Progressive Web App (PWA) using React</li>
            <li>Developing Games with React, Redux, and SVG - Part 1</li>
            <li>Infinite scroll techniques in React</li>
            <li>docx file generation and download Help</li>
            <li>How do you use mock data?</li>
            <li>How to model the behavior of Redux apps using statecharts</li>
        </ul>
    </div>
</div>

Components

Picker

可以把上面这一部分独立出来，可以组成一个component：

const Picker = () => (
    <span>
        <h1>reactjs</h1>
        <select>
            <option value="reactjs">reactjs</option>
            <option value="frontend">frontend</option>
        </select>