React开发实践（7）实战部分 Header 组件开发 2

1、安装  yarn add immutable
2、使用 fromJS 将我们 store 的数据 转为 immutable 类型
3、然后 更改数据时 使用 set 方法 
4、取数据 使用 get 方法 
复制代码

1、安装 yarn add redux-immutable
2、更改 combinReducers 引入 从这个 引入 
3、然后 更改页面调用方式 
复制代码

1、先写 最外层的 容器  SearchInfo
   2、写标题部分 SearchTitle 切换部分 SearchSwitch
   3、小的内容使用 SearchList 包裹 
   4、写小的 item    SearchItem
   5、写好之后 这篇区域触发条件就是 props.isFocused  提取为一个函数放在 外面 命名为 renderSearchInfo
复制代码

export const SearchInfo = styled.div`
  position: absolute;
  left: 0;
  top: 56px;
  width: 240px;
  padding: 0 20px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
`;
export const SearchTitle = styled.div`
  margin-top: 20px;
  margin-bottom: 15px;
  line-height: 20px;
  font-size: 14px;
  color: #969696;
  cursor: pointer;
`;
export const SearchSwitch = styled.div`
  float: right;
  font-size: 13px;
  cursor: pointer;
`;
export const SearchList = styled.div``;
export const SearchItem = styled.a`
  display: block;
  float: left;
  line-height: 20px;
  padding: 0 5px;
  font-size: 12px;
  border: 1px solid #ddd;
  color: #787878;
  border-radius: 3px;
  margin: 10px 10px;
  cursor: pointer;
`;
复制代码

0、先将 header/index 改成 class 组件，方便之后使用生命周期函数
  1、需要 安装 redux-thunk 使得 action 可以写成函数形式 
  2、在 store.index.js 配置一下
  3、actionCreator.js 写数据请求 使用 fetch 内置fetch 当然也可安装 axios
  4、在 public 文件夹下 新建 api 文件夹 建一个 headerList.json 文件
  5、因为 create-react-app 这个底层基于 node 服务 会先在 src 下找这个文件 如果没有这个接口 会在 public 寻找
复制代码

1、在 actionCreator.js 创建 action 并dispatch 到 store 
  2、reduce.js 处理 (prevState,action) --> newState 此处需要注意 更新state 需要 action.payload 数据  也就说 state.xxx = action.xxx  xxx是 payload 内容
  2、在页面先拿到数据（mapStateToProps）  然后使用 .map 渲染数据 
  3、愉快的展示出来 
复制代码

1、actionCreator.js 里将不导出的 action 放在顶部或者底部
2、reducer.js 将多个if改写出 switch case 的形式
3、组件内的 this.props.xxx 都使用解构赋值语法 写出来 
4、避免 多次发请求 
复制代码

1、只发一次请求 初始化 数据时 往往放在 didMount 中发起
    2、页面其他地方 只想发送一次请求  往往可以 通过拿到数据内的判断条件来 控制非重复发请求
复制代码

1、需要 添加一个 mouseIn 来确定鼠标是否移入/移出
    2、在组件添加对应的事件
    3、派发 action 并且写对应的 reducer 处理
    4、组件内 使用 mouseIn
复制代码

1、绑定事件 
2、需要拿到 totalPage 和 page 做判断后展示 内容 
3、 actionCreator
4、reducer.js 使用 新的 page
4、页面效果
复制代码

1、去 iconfont 找一个 spin
2、然后拿过来 更改一下 iconfont.js 内容 替换掉这个 @font-face 
3、此时可能有样式冲突，更改一下 className 可解决
复制代码

1、添加样式 
  2、使用 ref 拿到 这个i 标签并传递给 handleClick 
  3、拿到 rotate 的数值 部分 此处使用 正则过滤
  4、每次点击 + 360 ，开始为空时 则 设置 rotate = 0
复制代码