这是我在公司时候做的一个管理界面的React代码，当时是因为我leader说Angular坑太多了，所以叫我学习下这个，重做一遍那个项目T_T，于是我就花了一个多月去学习又做了一次T_T所以我也只是入门级水平，发出来是为了记录一下自己的心得体会，React-Redux、ES6新手可以看看，大神可以选择忽略或者给我指点一下~ =。=||

项目名字：React-backmanager

项目语言：ES6、ReactJs

模块分析：三个模块：CampaignContent、AddNew、BannerDetail

react的三个大模块的话，不跟angular的一样，因为react是以组件为单位的，所以整个大模块也是一个大组件。

用到的关键模块：react-redux、redux、react-router、pubsub-js(这个是维持不变的变量用的。)

redux的作用是维持全局一个store，保持数据的单向流动性。

react-redux就是为了跟react配合要加载的模块

react-router是我们关键的模块，用于路由.

Redux设计流程分析

1：首先要知道的一个问题就是，数据是单向流动的还是双向的？没错，是单向的，由store来保存一个总数据。通过修改store的数据来实现视图改变等需求。

2：但是我们知道，其实Redux不单可以和react配合，它也可以跟其他的库，框架配合使用的，所以对于两个独立的库来说，我们必须得把他们建立一个连接。

基于上面的简单思考，我们可以有一个思路来写代码了：

1：我们先得要创建一个store：

1.1

说白了，store里面就是一堆数据嘛，那么数据怎么来，通过reducer组合而来，所以createStore的时候，就要把初始化的数据传进来：rootReducer

1.2 rootReducer代码截图:

随着应用越来越大，一方面，不能把所有的数据都放到一个reducer里面，另一方面，为每个reducer创建一个store，后续store的维护就显得比较麻烦。如何将二者统一起来呢？

所以：通过combineReducers将多个reducer合并成一个rootReducer，虽然这里只有一个。

1.3 reducer的构建:

reducer的构建

而这些常量是自己定义的，如下图：

每次触发修改store数据的时候，只需要把制定好的动作执行并传参数进去就可以了。

其实常量也就是这些:

那么我们参数在哪里传入呢，下面就定义具体的构造如何传入参数：

这些是action里面的todos我们要执行动作的时候，写得就是这些小写的function名字，然后传入参数。

2：知道数据是怎么弄的，那么接下来我们是要连接redux跟react了：

2.1：就是要使用connect函数来连接：

connect函数需要传入是要融合为store的reducers，所以传进去的两个函数需要返回的是reducers

上面的那个是我们之前看到的那个rootReducer一个叫todos的reducers，里面是直接实时数据

下面的也是传入reducers，但是需要根据给进去的action指令来修改。

connect是一个高阶函数，首先传入mapStateToProps、mapDispatchToProps，然后返回一个生产

Component

的函数(wrapWithConnect)，然后再将真正的Component作为参数传入wrapWithConnect(MyComponent)，这样就生产出一个经过包裹的Connect组件，该组件具有如下特点:

通过this.context获取祖先Component的store

props包括stateProps、dispatchProps、parentProps,合并在一起得到

nextState ，作为props传给真正的Component

componentDidMount时，添加事件this.store.subscribe(this.handleChange)，实现页面交互

shouldComponentUpdate时判断是否有避免进行渲染，提升页面性能，并得到nextState

componentWillUnmount时移除注册的事件this.handleChange

在非生产环境下，带有热重载功能

2.2：最后在index里面组装好App这个主组件跟其他组件的关系，用redux连接起来：

而因为我们需要做一个过渡动画，所以在App这个组件里面，我们需要：

要加载的模块有：

PubSub的话，是一个提供可以在不同模块中还能保持读取的变量的模块。

最后是index.html里面在什么地方渲染这些组件：

3：接下来就很简单地去实现自己要做的构建页面了：

就是不停地把props跟action从父组件传到子组件里面使用：

例如，我们在最大的store里面传入其中的一个BannerDetail组件里面：

我们改变state只能通过setState来改变，然后就会产生实时的变化。

通过对传入的props来对数据进行改变(this.props.actions)和读取(this.props.todos)

这是对当面组件里面添加动作时候的写法，假如组件里面，还要添加小组件的写法是：

而在EditFolderName组件里面的代码是：

就是这样传入进行处理，跟父组件进行交互就可以了。