React demo：express、react-redux、react-router、react-roter-redux、redux-thunk（二）

　　上一篇杂七杂八说了下express部分的，如今开始进入正题。

　　接下去的顺序，就是项目从零开始的顺序（思路方向）。

 

【actions定义】

　　如图，目录页，有4部分的内容，因此如下几个actions是须要的：initTags、initLatest、initTimeline、initDirectory，而后点击tags和timeline后，出来的通过筛选的目录列表，因此还须要一个initDirectoryFilter的action，另外点击某个文章title后，查看具体的文章内容，因此还须要一个initPaper的action。

　　大体，思路就是这样，而后关于目录组织，以及action的写法（以initTags为例），我作了以下的调整（主要仍是我的习惯），可以正常导出就好。

　　

　　按照以上的actions文件夹下的index.js的写法，从别的地方引入模块，import整个actions便可（可参考下一部分，reducers的引入方式）。

　　另外，由于一开始必然不会把数据什么全考虑进来，因此能够暂时把传入的data去掉，具体以下图所示（以initTags为例）。

 

【reducers部分】

　　对应actions，每一个action对应到一个reducer。按照本来的设想，由于有多个页面（其实好像只有三个：directory、directoryFilter、paper），每一个页面对应一个reducer，而后配合

react-router-redux，方便管理，后来为了偷懒，直接写到一个reducer里面算了。

　　具体，看代码部分吧（以 initTags为例）。

 

　　和actions中的index.js相似，在main.js中引入reducer，直接import整个reducer便可，具体等会看main.js的内容。

　　另外，由于一开始必然没有考虑那么全，并且数据相关的也不太会一会儿就接进来，因此刚开始只作 “搭结构”这动做就能够了，具体以下图代码所示（以 initTags为例）。

 

【搭骨架】

　　好吧，取名有点取不出来了，只能这样了。

　　基本上，把actions和reducers定义好，而后就开始要把他们两个给用上了，可是如今网站的页面部分还没开始（或者完成），那就只有老老实实开始写了。

　　根据原网站（ 传送门），大体须要用到如下几个：前端路由（ react-router）、配合路由使用的redux（ react-redux和 react-router-redux），这两样是额外的，至于其余bootstrap静态文件、自定义的css文件等，默认当成必须的了。

　　先从main.js开始（由于涉及到路由，因此先从总的入口文件开始，把路由定好），具体以下图代码所示。

 

　　有个东西差点忘了，由于这个是我最后的main.js的样子，我取数据用了ajax异步获取，因此用了redux-thunk，可是一开始没有用到，直接使用，会致使出错（action返回的是一个object，redux-thunk会把原action改造，使其可以接收function，详细的有点不太描述的清，大体应该是没错），因此，刚开始的时候，由于没用到ajax，能够先把 createStore中的 applyMiddleware进行省略，使现阶段的流程可以正常走下去。

　　

　　另外，能够看到页面部分是有个indexPage的，可是这个页面部分实际只是静态的，和其余的主要页面相关性不大，因此暂时不用理会了。

　　

　　暂时，如今先写到这里，后续再继续聊containers和components部分，以及如何把同步的action改为异步的action。