React+Redux项目实战——简书

1.styled-components（进行react项目的CSS布局）

CSS文件一旦在一个文件中引入，则在全局都生效，易出错，故使用styled-components第三方插件实现CSS样式的引入。

styled-components功能：实现带样式的组件，这些组件的样式是组件独享的，样式组件之间的样式不会产生影响。

2.Reset CSS

固定写法，见：https://meyerweb.com/eric/tools/css/reset/

每个浏览器都有一些自带的或者共有的默认样式，或造成一些布局上的困扰，css  reset的作用就是重置这些默认样式，使样式表现一致；为了让页面获得浏览器跨浏览器的兼容性，需要用重置文件css代码覆盖浏览器默认的样式来统一样式。

3.iconfont

4.使用combineReducers完成对数据的拆分管理

将一个总的reducer数据，按子组件拆分成不同的小的reducer数据

index.js文件是一个文件夹（store）的入口/出口，所以在引入一个文件夹（store）内的js文件（比如actionCreators.js）时可不用写到具体的该文件，只需将所有js文件（比如actionCreators.js）的出口放到该文件夹（store）的index.js文件中，因此引入该文件夹下的所有文件时（比如actionCreators.js），只写到所在文件夹（store）就可以了。

5.actionCreators与constants的拆分

6.使用Immutable插件来管理store中的数据

安装：npm install immutable

使用Immutable.js可以生成一个不可改变的immutable对象，若使得state成为immutable对象（不可改变），这样就不用担心在reducer操作数据过程中会改变state，这样reducer就不会出问题。

//fromJS方法将header下的js对象数据focused转化成immutable对象
const defaultState = fromJS({
    focused: false
});

//获取immutable对象数据
return {
        //将数据拆分后，focused相对于store中直接的Reducer降了一级
        //将store中和header下的数据都变成immutable对象了，immutable对象的数据使用get方法获取数据
        focused: state.get('header').get('focused')
    }

//设置immutable对象新值
state.set('focused', true)

7.使用redux-immutable统一数据格式

由于上述6.所使用的的immutable只是将header组件下的reducer数据变成了immutable对象，而总的store中的state数据对象并没有变成immutable对象，还是普通对象，这样就存在操作数据时，state使用“.”操作数据，immutable对象（header下的focused）使用“get、set”方法，如下所示

return {
        focused: state.header.get('focused')
    }

因此，需要使用redux-immutable插件将总的store中的state数据也变为immutable对象。

安装：npm install redux-immutable

import { combineReducers } from "redux-immutable";
//redux-immutable提供了与redux一样的combineReducers方法，用来将各部分reducer整合成一个reducer
import { reducer as headerReducer } from '../common/header/store';

//将拆分出去的各个部分Reducer数据结合成一个总的Reducer数据
//redux-immutable提供的combineReducers方法生成的reducer数据内容就是immutable对象的
const reducer = combineReducers({
    header: headerReducer
});

export default reducer;

获取普通对象数据：

focused: state.header.focused

获取immutable对象数据：

focused: state.getIn(['header', 'focused'])
focused: state.get('header').get('focused')//与上等价

设置immutable对象数据：

state.set('focused', true)

8.Ajax获取推荐数据

使用redux-thunk；

public文件夹下可以存放假数据，当向服务器进行数据请求时，先在工程里找向服务器请求数据，如果不成功，则去public下找对应路径下的文件（假数据：public/api/headerList.json）。项目发布前须将假数据文件删除。

获取ajax数据的时候，页面加载一次只需要请求一次就可以了；通过判断list中是否有值，进行控制发送ajax请求。

9.换页旋转动画效果的实现

思路：首先给icon添加过渡效果；添加鼠标点击事件；获取icon所在DOM标签；获取DOM标签的transform属性中的rotate的当前值，没有则设置为0；鼠标每次点击，设置transform中rotate旋转值为：原值+360。