15.首页组件拆分+专题区域布局+reducer的设计19-06

代码见https://gitee.com/XiaoKunErGe/JianShu.git历史版本第15次提交。
一.创建一个pages文件夹，并在文件夹下创建两个home和detail两个文件夹，并分别在里面创建index.js文件，填写基本代码

import React, { Component } from 'react';
class Home extends Component {
  render(){
    return(
      <div>Home~</div>
    )
  }
}
export default Home;

二.将home和detail天加到使用react-router-dom创建路由中

<BrowserRouter>
          <Route path='/' exact component={Home}/>
          <Route path='/detail' exact component={Detail}/>
        </BrowserRouter>

三.到home文件夹下，根据页面大小布局创建组件
index.js

import React, { Component } from 'react';
import {
  HomeWrapper,
  HomeLeft,
  HomeRight
} from './style'
class Home extends Component {
  render(){
    return(
     <HomeWrapper>
        <HomeLeft> 
           <img className='banner-img' src="//upload.jianshu.io/admin_banners/web_images/4660/224da83c76e01d5deff07e163615921233af5c82.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"/>
        </HomeLeft>
        <HomeRight>
        </HomeRight>
     </HomeWrapper>
    )
  }
}
export default Home;

style.js

import styled from 'styled-components';

export const HomeWrapper = styled.div`
  width: 960px;
  margin: 0 auto;
  height: 300px;
  // background: gray;
`;
export const HomeLeft = styled.div`
  float: left;
  margin-left: 15px;
  padding-top: 30px;
  width: 625px;
  // background: yellow;
  .banner-img {
     width: 625px;
     height: 270px;
   }
`;
export const HomeRight = styled.div`
  width: 240px;
  float: right;
  background: yellow;
`;
export const TopicWrapper = styled.div`
  overflow: hidden;
  padding: 20px 0 10px 0;
  // background: red;
  margin-left: -18px;
`;

四.在home文件夹下创建components文件夹，根据简书的布局创建组件 屏幕快照 2019-06-20 11.21.30.png

先分别在组件中填入基本代码

import React, { Component } from 'react';
class List extends Component {
  render(){
    return(
      <div>List</div>
    )
  }
}
export default List;

到Topic.js中填写添加更多热门组件，因为这个Topic实际功能特别少，所以他的样式写在home最外层的style里
Topic.js

import React, { Component } from 'react';
import { TopicWrapper,TopicItem } from '../style';
//引用最home外层的style
class Topic extends Component {
  render(){
    return(
      <TopicWrapper>
        <TopicItem>
          <img
            className='topic-pic'
            src='//wx1.sinaimg.cn/orj360/933aae1agy1frwojshgg9j20j60j6tcw.jpg'/>
           社会热点
        </TopicItem>
      </TopicWrapper>
      //这个Topic组件实际功能特别少，所以他的样式写在home最外层的style里
    )
  }
}
export default Topic;

style.js

export const TopicWrapper = styled.div`
  overflow: hidden;
  padding: 20px 0 10px 0;
  // background: red;
  margin-left: -18px;
`;
export const TopicItem = styled.div`
  float: left;
  height: 32px;
  line-height: 32px;
  margin-left: 18px;
   margin-bottom: 18px;
  padding-right: 10px;
  background: #f7f7f7;
  font-size: 14px;
  color: #000;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  .topic-pic {
    display: block;
    float:left;
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }  
`;

这样就把热门推荐里的item基本样式实现了，多添加几个<TopicItem>就是如图效果 屏幕快照 2019-06-20 11.30.52.png

上半部分我们用实现了热门推荐的基本样式，下面我们用reducer为这个样式添加数据

一.在home文件夹下创建一个store文件夹，并在store文件夹下创建reducer和index。
reducer.js

import {  fromJS } from 'immutable';
const defaultState = fromJS({
  topicList: [{
    id: 1,
    title: "社会热点",
    imgUrl: '//wx1.sinaimg.cn/orj360/933aae1agy1frwojshgg9j20j60j6tcw.jpg',
  },{
    id: 1,
    title: "手绘",
    imgUrl: '//wx1.sinaimg.cn/orj360/933aae1agy1frwojshgg9j20j60j6tcw.jpg',
  }]
});
export default (state = defaultState, action) => {
    switch(action.type){
       default:
           return state;
   }
}

index.js

//在这里将reducer导出
import reducer from './reducer';
export { reducer };

二.然后到src下最外层store的reducer中去集中处理home这个reducer，返回给最外层store，提供给用户

import { combineReducers } from 'redux-immutable';
//redux提供的combineReducers可以把小的reducer合并起来
import {reducer as headerReducer} from '../commen/header/store';
import {reducer as homeReducer}from'../pages/home/store'

const reducer = combineReducers({
  header: headerReducer,
  home: homeReducer,
});
export default reducer;

三.在Topic.js中使用store的数据

在.App.js中只要是在Provider中的组件都可以使用store的数据，Home在Provider中，Topic是Home的子组件所以也可以直接使用store里的数据。

在Topic.js中使用react-redux获取store中的数据
import { connect }from 'react-redux';
让Topic组件和store的数据进行连接
export default connect(mapStateToProps, null)(Topic);
从store中拿到所需数据,

const mapStateToProps  = (state) => ({
  //mapStateToProps指的是从store里拿数据
  list: state.get('home').get('topicList')
});

四.拿到数据改写<TopicItem>组件

<TopicWrapper>
        {
          this.props.list.map((item) => {
            return(
              <TopicItem key={item.get('id')}>
            <img
            className='topic-pic'
            src={item.get('imgUrl')}
            />
                {item.get('title')}
            </TopicItem>
            )
          })
        }
 </TopicWrapper>

这里可以去掉return，将花括号改为小括号，代码更加简洁

<TopicWrapper>
        {
          this.props.list.map((item) => (    
              <TopicItem key={item.get('id')}>
                 <img
                    className='topic-pic'
                    src={item.get('imgUrl')}
                 />
                {item.get('title')}
            </TopicItem>   
          ))
        }
 </TopicWrapper>

刷新，显示

屏幕快照 2019-06-20 15.43.10.png