（11）首页开发——③ 使用 React-redux 管理首页数据 | React.js 项目实战：PC 端“简书”开发

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥"前端一万小时"两大明星专栏------"从零基础到轻松就业"、"前端面试刷题"，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

1 "套路"分析

在上一篇文章中，我们对"首页"做了比较详细地布局。但如你所见，里边的所有数据都是写死的。实际编码中，这些数据应该都是通过"接口"返回出来的。

本篇，我们先按 React-redux 的流程，将数据放在合理的位置，并分门别类地显示在"首页"。

🚀以 Label 组件为例，我们先理理 React-redux 的流程（或者说叫"套路"）：

我的这个 Label 组件要显示一些如列表一样的内容，列表的内容应该存在哪呢？

一定要存在 Redux 的 store 里，而 store 中有什么数据则是由 reducer 来决定的。

在之前的编码过程中，reducer 被我们拆成了很多部分。即，home 页面下的 Label 组件，它的数据一定要存在 home 这个页面对应的 reducer 中，让 home 的 reducer 来管理整个 home 页面的数据。

因此，我们需要在 home 目录下创建一个 store 文件夹。里边添加一个 reducer.js 文件。

在 reducer.js 文件里，定义 home 的 reducer 下默认的"数据"（它有几项 Labels 数据值）。

OK，以上把"数据"放到位后，需要考虑 Label 这个组件怎么去用这个"数据"了？

在 Label.js 文件中，用 react-redux 的 connect 方法，让 Label 组件和 store 作连接。

连接好后，我们就可以从 store 里边取出我需要的数据并展示在页面上。

2 Label 组件"数据"展示

由于在《Header 组件开发------⑤ React-redux 搭建标准的项目架子》、《Header 组件开发------⑥ Immutable.js 和 redux-immutable 助力数据管理》、《Header 组件开发------⑦ AJAX 获取推荐数据》三篇文章中，我们已经用 React-redux 和一系列的第三方工具把整个项目的"架子"搭起来了，所以接下来的各个组件就直接按"套路"进行编码即可。

1️⃣打开 src 目录 pages 下的文件夹 home ，home 下有很多只属于 home 各组件的"数据"，我们就可以将这些"数据"放在 home 里进行管理。 在 home 目录下新建一个文件夹 store ：

2️⃣紧接着，在 store 文件夹下创建一个 index.js 文件，它的作用为------❗️它是这整个 store 的"出口"文件("出口"文件的好处为：它可以简化引用文件时的"路径"，也便于后期维护~)：

3️⃣在 store 文件夹下创建一个 reducer.js 文件，让 reducer.js 来管理 home 下的"数据"：

4️⃣同理，在 store 文件夹下创建 actionTypes.js 和 actionCreators.js 文件备用：

小架子搭起后，我们按流程编写各文件里的代码。

5️⃣编写 reducer.js 中的代码： 5️⃣-①： reducer.js 文件返回一个"函数"；

import {fromJS} from "immutable"; /*
																	❗️从 immutable 中引入 fromJS 方法，这个"方法"可以
                                  帮我们把一个"JS 对象"转化为一个"immutable 对象"！
                                   */

const defaultState = fromJS(

)

export default (state=defaultState, action) => {  
  
  return state;
}

5️⃣-②：将 home 目录下 components 文件夹里 Label.js 文件中写死的"数据"分门别类放到 reducer.js 中；

import {fromJS} from "immutable"; 

const defaultState = fromJS({
  labelList: [{
    id: 1,
    title: "简书电影",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label01.jpg"
  },{
    id: 2,
    title: "故事",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label02.jpg"
  },{
  	id: 3,
    title: "手绘",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label03.jpg"
  },{
    id: 4,
    title: "历史",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label04.jpg"
  },{
  	id: 5,
    title: "人文社科",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label05.jpg"
  },{
  	id: 6,
    title: "摄影",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label06.jpg"
  },{
  	id: 7,
    title: "自然科普",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label07.jpg"
  }]
})

export default (state=defaultState, action) => {  
  
  return state;
}

5️⃣-③：打开 home 目录下 store 中的"出口"文件 index.js ，定义一些通用的需要传递出去的东西；

import reducer from "./reducer";
import * as actionTypes from "./actionTypes";
import * as actionCreators from "./actionCreators";

export {reducer, actionTypes, actionCreators};

5️⃣-④：返回 src 目录下 store 中的 reducer.js 文件，引入上一步创建的 reducer；

import {combineReducers} from "redux-immutable";

import {reducer as headerReducer} from "../common/header/store"; 

import {reducer as homeReducer} from "../pages/home/store"; // ❗️

const reducer = combineReducers({ 
  header: headerReducer,
  
  home: homeReducer // ❗️
})


export default reducer;

6️⃣OK，通过以上的步骤，store 里边就有数据了。按照 Redux 和 React-redux 的工作流程，一旦有了数据，Home 组件下 components 文件夹里的所有"子组件"就都可以连接 store，去 store 里边取数据并显示出来！

6️⃣-①：按照流程，这一步应该是让"Home 组件"拥有获取 store 中数据的"能力"。但这一步，我们在《首页开发------① 如何在 React 中使用"路由"》中已经实现了------我们已经把 Home 组件放到了 Provider 组件之中。

打开 src 目录下的 App.js 文件查看：

import React, { Component } from "react";

import {GlobalStyle} from "./style";

import {GlobalIconStyle} from "./statics/iconfont/iconfont";

import {BrowserRouter, Route} from "react-router-dom";

import Header from "./common/header";

import Home from "./pages/home";
import Detail from "./pages/detail";

import { Provider } from "react-redux";

import store from "./store";

class App extends Component  {  
  render() {  
    return (
      <div>
        <GlobalStyle />
        <GlobalIconStyle />
 
        <Provider store={store}>             
          <BrowserRouter>
            <div>
              <Header />
      
              <Route path="/" exact component={Home}></Route> {/* ❗️ */}
                  
              <Route path="/detail" exact component={Detail}></Route>
            </div>
          </BrowserRouter>
        </Provider>

      </div>
    );
  }
}

export default App; 

❗️可光有"能力"可不行，"Label 组件"要具体怎么去获取"数据"呢？

打开 home 目录下 components 文件夹下的 Label.js 文件：

import React, {Component} from "react";

import {
  LabelGroup,
  Labels,
  MoreLabels
} from "../style";

/*
❗️❗️❗️6️⃣-②：从 react-redux 中引入 connect 方法（它也是 React-redux 的核心 API 之一），
connect 的作用很明确------就是"连接"的意思！
 */
import { connect } from "react-redux";


class Label extends Component {
  render() {
    
    return(
      <LabelGroup className="clearfix">
        {/*
         ❗️❗️❗️6️⃣-⑨："映射"上了过后，我们就可以通过调用 this.props.labelList 来
         "调用"store 中的 labelList 了！
         删除下边的代码，重新 this.props 来改写~
        <Labels>
          <img src="https://qdywxs.github.io/jianshu-images/label01.jpg" alt="" />
          简书电影
        </Labels>
        <Labels>
          <img src="https://qdywxs.github.io/jianshu-images/label02.jpg" alt="" />
          故事
        </Labels>
        <Labels>
          <img src="https://qdywxs.github.io/jianshu-images/label03.jpg" alt="" />
          手绘
        </Labels>
        <Labels>
          <img src="https://qdywxs.github.io/jianshu-images/label04.jpg" alt="" />
          历史
        </Labels>
        <Labels>
          <img src="https://qdywxs.github.io/jianshu-images/label05.jpg" alt="" />
          人文社科
        </Labels>
        <Labels>
          <img src="https://qdywxs.github.io/jianshu-images/label06.jpg" alt="" />
          摄影
        </Labels>
        <Labels>
          <img src="https://qdywxs.github.io/jianshu-images/label07.jpg" alt="" />
          自然科普
        </Labels>
          */}
  			{
          this.props.labelList.map((item) => {
            return (
              <Labels key={item.get("id")}> {/* ❗️由于是"循环"，所以要给每一项一个 key 值！ */}
                <img src={item.get("imgUrl")} alt="" /> {/* ❗️注意 get 的使用！ */}
                {item.get("title")}
              </Labels>
            )
          })
				}
  
        <MoreLabels>
          更多热门专题
        </MoreLabels>
      </LabelGroup>
    )
  }
}


// 6️⃣-⑥：接下来，我们先定义"连接"的"规则"；
const mapStateToProps = (state) => { /*
																		 6️⃣-⑦：把 store 里的"数据 state"作为"参数"
                                     传递给 mapStateToProps；
                                      */
  
  return { // ❗️这个"规则"会返回一个"对象"出去！
    labelList: state.getIn(["home", "labelList"]) /*
    												❗️❗️❗️6️⃣-⑧："规则"的具体做法为------将 store 里的  
                            labelList 映射到"Label 组件"里的 props 的 labelList 中去；
                                                   */
  
  }

}


/*
❗️❗️❗️6️⃣-③：之前我们直接导出的是 Header，可用了 React-redux 后，就不能这样写了！
export default Label;
 */

/*
6️⃣-④：取而代之，我们是导出 connect 方法（
❗️注意看我们给 connect 方法传递了哪些参数！）；
 */
export default connect(mapStateToProps, null)(Label); /*
																				6️⃣-⑤：我们一共要给 connect 传递 3 个参数！
                                        Label 表示：connect 会让"Label 组件"和 store
                                        进行"连接"（由"6️⃣-①"可知，Label 已经拥有"能力"
                                        连接 store）；
                                        
                                        mapStateToProps 表示："Label 组件"和 store 
                                        进行"连接"是需要"规则"的，而具体的"规则"就在这个
                                        mapStateToProps 里边（❗️直译为：把 store 里边的
                                        "数据 state"映射到"Label 组件"的 props 里）；
                                        
                                        null 表示：这里还会接收一个名叫 
                                        mapDispatchToProps 的参数，等下"改变数据"时讲解，
                                        这里先用 null 占位。
                                                      */

返回页面查看（数据正确显示）：

3 Content 组件"数据"展示

1️⃣将 home 目录下 components 文件夹里 Content.js 文件中写死的"数据"分门别类放到 reducer.js 中：

import {fromJS} from "immutable"; 

const defaultState = fromJS({
  labelList: [{
    id: 1,
    title: "简书电影",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label01.jpg"
  },{
    id: 2,
    title: "故事",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label02.jpg"
  },{
    id: 3,
    title: "手绘",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label03.jpg"
  },{
    id: 4,
    title: "历史",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label04.jpg"
  },{
    id: 5,
    title: "人文社科",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label05.jpg"
  },{
    id: 6,
    title: "摄影",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label06.jpg"
  },{
    id: 7,
    title: "自然科普",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label07.jpg"
  }],
  
  articleList: [{
    id: 1,
    title: "评"超时空同居"浅议爱情电影和奇幻元素的嫁接",
    desc: "这部电影充分照顾到了八零后的情怀，九零后的笑点，零零后嘛，那就是奇幻爱情吧。奇幻爱情喜剧，三种元素都有，但哪种都不出彩，相对来说喜剧元素稍微强一...",
    imgUrl: "https://qdywxs.github.io/jianshu-images/article-img01.jpg",
    author: "苇筱",
    discuss: 31,
    love: 21,
    money: 1
  },{
    id: 2,
    title: "生活随记八则",
    desc: "1 不再困惑也不再迷茫，头脑中的构想在现实生活中并驾齐驱地向前推进，虽然困难重重但能够想方设法加以克服。前景广阔而美好，只是有一丝淡淡的凄凉，也...",
    imgUrl: "https://qdywxs.github.io/jianshu-images/article-img02.jpeg",
    author: "Jobs",
    discuss: 31,
    love: 90,
    money: 8
  },{
    id: 3,
    title: ""前端一万小时"又惊艳了我一把",
    desc: "Hey guys, 我正在这个平台分发"前端一万小时"这个专栏的一系列文章。这个专栏我已经完成了"从零基础到就业"的相关文章。"从零基础到就业"包含 150+ 篇干货文章，300+ 道经典笔试、面试题。如果你对本系列文章感兴趣，欢迎关注 「公众号：前端一万小时」，并点击菜单栏"全部文章"来加入我们的"一万小时计划"！祝顺利，祝成功^^......",
    imgUrl: "https://qdywxs.github.io/jianshu-images/article-img03.jpg",
    author: "Oli",
    discuss: "9k+",
    love: "10k+",
    money: "100000k+"
  }]
  
})

export default (state=defaultState, action) => {  
  
  return state;
}

2️⃣同理，"Content 组件"已经拥有获取 store 中数据的"能力"，但光有"能力"可不行，"Content 组件"要具体怎么去获取"数据"呢？

2️⃣-①：打开 home 目录下 components 文件夹下的 Content.js 文件；

import React, {Component} from "react";

import {Link} from "react-router-dom";

import {
  Item,
  Cover,
  Details,
  Title,
  Foot,
  LoadMore
} from "../style";

/*
❗️❗️❗️2️⃣-②：从 react-redux 中引入 connect 方法（它也是 React-redux 的核心 API 之一），
connect 的作用很明确------就是"连接"的意思！
 */
import { connect } from "react-redux";

class Content extends Component {
  render() {
    
    return(
      <div>
        
        {/*
         ❗️❗️❗️2️⃣-⑨："映射"上了过后，我们就可以通过调用 this.props.articleList 来
         "调用"store 中的 articleList 了！
         删除下边的代码，重新用 this.props 来改写~
        <Item>
          <Cover>
            <Link to="/detail"><img src="https://qdywxs.github.io/jianshu-images/article-img01.jpg" alt="" /></Link>
          </Cover>
        
          <Details>
            <Link to="/detail">
              <Title>
                评"超时空同居"浅议爱情电影和奇幻元素的嫁接
              </Title>
            </Link>
            <p>
              这部电影充分照顾到了八零后的情怀，九零后的笑点，零零后嘛，那就是奇幻爱情吧。奇幻爱情喜剧，三种元素都有，但哪种都不出彩，相对来说喜剧元素稍微强一...
            </p>
        
            <Foot>
              <Link to="#"><span className="username">苇筱</span></Link>
              <span className="iconfont icon-comment">&#xe602;</span><span>31</span>
              <span className="iconfont icon-heart">&#xe8f4;</span><span>21</span>
              <span className="iconfont icon-money">&#xe607;</span><span>1</span>
            </Foot>
          </Details>
        </Item>
        
        <Item>
          <Cover>
            <Link to="/detail"><img src="https://qdywxs.github.io/jianshu-images/article-img02.jpeg" alt="" /></Link>
          </Cover>
        
          <Details>
            <Link to="/detail">
              <Title>
                生活随记八则
              </Title>
            </Link>
            <p>
              1 不再困惑也不再迷茫，头脑中的构想在现实生活中并驾齐驱地向前推进，虽然困难重重但能够想方设法加以克服。前景广阔而美好，只是有一丝淡淡的凄凉，也...
            </p>
        
            <Foot>
              <Link><span className="username">Jobs</span></Link>
              <span className="iconfont icon-comment">&#xe602;</span><span>31</span>
              <span className="iconfont icon-heart">&#xe8f4;</span><span>21</span>
              <span className="iconfont icon-money">&#xe607;</span><span>1</span>
            </Foot>
          </Details>
        </Item>
        
        <Item>
          <Cover>
            <Link to="/detail"><img src="https://qdywxs.github.io/jianshu-images/article-img03.jpg" alt="" /></Link>
          </Cover>
        
          <Details>
            <Link to="/detail">
              <Title>
                "前端一万小时"又惊艳了我一把
              </Title>
            </Link>
            <p>
              Hey guys, 我正在这个平台分发"前端一万小时"这个专栏的一系列文章。这个专栏我已经完成了"从零基础到就业"的相关文章。"从零基础到就业"包含 150+ 篇干货文章，300+ 道经典笔试、面试题。如果你对本系列文章感兴趣，欢迎关注 「公众号：前端一万小时」，并点击菜单栏"全部文章"来加入我们的"一万小时计划"！祝顺利，祝成功^^......
            </p>
        
            <Foot>
              <Link to="#"><span className="username">Oli</span></Link>
              <span className="iconfont icon-comment">&#xe602;</span><span>9k+</span>
              <span className="iconfont icon-heart">&#xe8f4;</span><span>10k+</span>
              <span className="iconfont icon-money">&#xe607;</span><span>100000k+</span>
            </Foot>
          </Details>
        </Item>
          */}
        {
          this.props.articleList.map((item) => {
            return (
              <Item key={item.get("id")}>
                <Cover>
                  <Link to="/detail"><img src={item.get("imgUrl")} alt="" /></Link>
                </Cover>

                <Details>
                  <Link to="/detail">
                    <Title>
                      {item.get("title")}
                    </Title>
                  </Link>
                  <p>
                    {item.get("desc")}
                  </p>

                  <Foot>
                    <Link to="/"><span className="username">{item.get("author")}</span></Link>
                    <span className="iconfont icon-comment">&#xe602;</span><span>{item.get("discuss")}</span>
                    <span className="iconfont icon-heart">&#xe8f4;</span><span>{item.get("love")}</span>
                    <span className="iconfont icon-money">&#xe607;</span><span>{item.get("money")}</span>
                  </Foot>
                </Details>
              </Item>
            )
          })
        } 
      
        <LoadMore>
          加载更多
        </LoadMore>
      </div>
    )
  }
}


// 2️⃣-⑥：接下来，我们先定义"连接"的"规则"；
const mapStateToProps = (state) => { /*
																		 2️⃣-⑦：把 store 里的"数据 state"作为"参数"
                                     传递给 mapStateToProps；
                                     */
  
  return { // ❗️这个"规则"会返回一个"对象"出去！
    articleList: state.getIn(["home", "articleList"]) /*
    									  ❗️❗️❗️2️⃣-⑧："规则"的具体做法为------将 store 里的  
                        articleList 映射到"Content 组件"里的 props 的 articleList 中去；
                                                       */
  
  }

}


/*
❗️❗️❗️2️⃣-③：之前我们直接导出的是 Content，可用了 React-redux 后，就不能这样写了！
export default Content;
 */

/*
2️⃣-④：取而代之，我们是导出 connect 方法（
❗️注意看我们给 connect 方法传递了哪些参数！）；
 */
export default connect(mapStateToProps, null)(Content); /*
																				2️⃣-⑤：我们一共要给 connect 传递 3 个参数！
                                        Content 表示：connect 会让"Content 组件"和 store
                                        进行"连接"；
                                        
                                        mapStateToProps 表示："Content 组件"和 store 
                                        进行"连接"是需要"规则"的，而具体的"规则"就在这个
                                        mapStateToProps 里边（❗️直译为：把 store 里边的
                                        "数据 state"映射到"Content 组件"的 props 里）；
                                        
                                        null 表示：这里还会接收一个名叫 
                                        mapDispatchToProps 的参数，等下"改变数据"时讲解，
                                        这里先用 null 占位。
                                                         */

返回页面查看效果（数据正确显示）：

4 Panels 组件"数据"展示

1️⃣将 home 目录下 components 文件夹里 Panels.js 文件中写死的"数据"分门别类放到 reducer.js 中：

import {fromJS} from "immutable"; 

const defaultState = fromJS({
  labelList: [{
    id: 1,
    title: "简书电影",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label01.jpg"
  },{
    id: 2,
    title: "故事",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label02.jpg"
  },{
    id: 3,
    title: "手绘",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label03.jpg"
  },{
    id: 4,
    title: "历史",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label04.jpg"
  },{
    id: 5,
    title: "人文社科",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label05.jpg"
  },{
    id: 6,
    title: "摄影",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label06.jpg"
  },{
    id: 7,
    title: "自然科普",
    imgUrl: "https://qdywxs.github.io/jianshu-images/label07.jpg"
  }],
  
  articleList: [{
    id: 1,
    title: "评"超时空同居"浅议爱情电影和奇幻元素的嫁接",
    desc: "这部电影充分照顾到了八零后的情怀，九零后的笑点，零零后嘛，那就是奇幻爱情吧。奇幻爱情喜剧，三种元素都有，但哪种都不出彩，相对来说喜剧元素稍微强一...",
    imgUrl: "https://qdywxs.github.io/jianshu-images/article-img01.jpg",
    author: "苇筱",
    discuss: 31,
    love: 21,
    money: 1
  },{
    id: 2,
    title: "生活随记八则",
    desc: "1 不再困惑也不再迷茫，头脑中的构想在现实生活中并驾齐驱地向前推进，虽然困难重重但能够想方设法加以克服。前景广阔而美好，只是有一丝淡淡的凄凉，也...",
    imgUrl: "https://qdywxs.github.io/jianshu-images/article-img02.jpeg",
    author: "Jobs",
    discuss: 31,
    love: 90,
    money: 8
  },{
    id: 3,
    title: ""前端一万小时"又惊艳了我一把",
    desc: "Hey guys, 我正在这个平台分发"前端一万小时"这个专栏的一系列文章。这个专栏我已经完成了"从零基础到就业"的相关文章。"从零基础到就业"包含 150+ 篇干货文章，300+ 道经典笔试、面试题。如果你对本系列文章感兴趣，欢迎关注 「公众号：前端一万小时」，并点击菜单栏"全部文章"来加入我们的"一万小时计划"！祝顺利，祝成功^^......",
    imgUrl: "https://qdywxs.github.io/jianshu-images/article-img03.jpg",
    author: "Oli",
    discuss: "9k+",
    love: "10k+",
    money: "100000k+"
  }],
  
  panelsList: [{
  	id: 1,
    imgUrl: "https://qdywxs.github.io/jianshu-images/panel01.png"
  },{
  	id: 2,
    imgUrl: "https://qdywxs.github.io/jianshu-images/panel02.png"
  },{
  	id: 3,
    imgUrl: "https://qdywxs.github.io/jianshu-images/panel03.png"
  },{
  	id: 4,
    imgUrl: "https://qdywxs.github.io/jianshu-images/panel04.png"
  },{
  	id: 5,
    imgUrl: "https://qdywxs.github.io/jianshu-images/panel05.png"
  }]
  
})

export default (state=defaultState, action) => {  
  
  return state;
}

2️⃣同理，"Panels 组件"已经拥有获取 store 中数据的"能力"，但光有"能力"可不行，"Panels 组件"要具体怎么去获取"数据"呢？

2️⃣-①：打开 home 目录下 components 文件夹下的 Panels.js 文件；

import React, {Component} from "react";

import {Link} from "react-router-dom"; 

import {
  PanelImage
} from "../style";

/*
❗️❗️❗️2️⃣-②：从 react-redux 中引入 connect 方法（它也是 React-redux 的核心 API 之一），
connect 的作用很明确------就是"连接"的意思！
 */
import { connect } from "react-redux";


class Panels extends Component {
  render() {
    
    return(
      <div>
       
        {/*
         ❗️❗️❗️2️⃣-⑨："映射"上了过后，我们就可以通过调用 this.props.panelsList 来
         "调用"store 中的 panelsList 了！
         删除下边的代码，重新用 this.props 来改写~
        <PanelImage>
          <Link to="#">
            <img src="https://qdywxs.github.io/jianshu-images/panel01.png" alt="" />
          </Link>
        </PanelImage>
       

        <PanelImage>
          <Link to="#">
            <img src="https://qdywxs.github.io/jianshu-images/panel02.png" alt="" />
          </Link>
        </PanelImage>
        
        
        <PanelImage>
          <Link to="#">
            <img src="https://qdywxs.github.io/jianshu-images/panel03.png" alt="" />
          </Link>  
        </PanelImage>

        
        <PanelImage>
          <Link to="#">
            <img src="https://qdywxs.github.io/jianshu-images/panel04.png" alt="" />
          </Link>
        </PanelImage>
       
        
        <PanelImage>
          <Link to="#">
            <img src="https://qdywxs.github.io/jianshu-images/panel05.png" alt="" />
          </Link>
        </PanelImage>
          */}
        {
          this.props.panelsList.map((item) => {
            return (
              <PanelImage key={item.get("id")}>
                <Link to="/">
                  <img src={item.get("imgUrl")} alt="" />
                </Link>
              </PanelImage>  
            )
          })
        }
      </div>
    )
  }
}


// 2️⃣-⑥：接下来，我们先定义"连接"的"规则"；
const mapStateToProps = (state) => { /*
																		 2️⃣-⑦：把 store 里的"数据 state"作为"参数"
                                     传递给 mapStateToProps；
                                      */
  
  return { // ❗️这个"规则"会返回一个"对象"出去！
    panelsList: state.getIn(["home", "panelsList"]) /*
    											 ❗️❗️❗️2️⃣-⑧："规则"的具体做法为------将 store 里的  
                           panelsList 映射到"Panels 组件"里的 props 的 panelsList 中去；
                                                     */
  
  }

}



/*
❗️❗️❗️2️⃣-③：之前我们直接导出的是 Panels，可用了 React-redux 后，就不能这样写了！
export default Panels;
 */

/*
2️⃣-④：取而代之，我们是导出 connect 方法（
❗️注意看我们给 connect 方法传递了哪些参数！）；
 */
export default connect(mapStateToProps, null)(Panels); /*
																				2️⃣-⑤：我们一共要给 connect 传递 3 个参数！
                                        Panels 表示：connect 会让"Panels 组件"和 store
                                        进行"连接"；
                                        
                                        mapStateToProps 表示："Panels 组件"和 store 
                                        进行"连接"是需要"规则"的，而具体的"规则"就在这个
                                        mapStateToProps 里边（❗️直译为：把 store 里边的
                                        "数据 state"映射到"Panels 组件"的 props 里）；
                                        
                                        null 表示：这里还会接收一个名叫 
                                        mapDispatchToProps 的参数，等下"改变数据"时讲解，
                                        这里先用 null 占位。
                                                        */

返回页面查看效果（数据正确显示）：

下一篇我们通过"异步数据获取"的方式将"数据"更合理地展现。

祝好，qdywxs ♥ you！