react怎样搭配redux和React_Router

#1

[TOC]

困境

公司现有一个项目（用php写的），现在公司打算用React+Redux+React_Router，重构整个项目的前端。

现境

先是自学了React、然后是Redux、React_Router，基本上可以写一些简单的Demo （React+Redux，或者是React+React_Router）。

对ES6不算熟悉，不过之前花了很多功夫在Redux上 （因为例子都是ES6写的，所以ES6勉强还是可以吧），打算项目用ES6。另外，想用 Webpack打包并管理依赖，额，其实这个也不是很熟悉，不过基本上的还是会用 （指最基本的，Babel、CSS Module、一些loader等，不过对于Webpack Dev Server方面一知半解）。

感觉单独玩React、React+Redux或React+React_Router压力不算很大，不过要将他们连起来好像有点难啃。

还是说真相吧，其实我算是一个前端新手^_^。不过还是挺希望可以靠自己重构这个项目。虽然很多东西都要慢慢摸索，不过过程中学到很多东西。

疑惑

个人理想使用React+Redux+React_Router之后，可以实现前后端分离（不知道有没有错，感觉不再需要在html中写php代码，php只需要处理好逻辑，同时给数据我前端就可以了）【纯属个人猜测，不知道是不是这样，绝无贬低php的意思，希望php大神不要喷我/(ㄒoㄒ)/~~ 】

看过一些文章，不过可能是我自己能力不够，理解不了。
前端后端分离解决方案(Goku)

有一个项目感觉挺符合自己的要求，不过还是有点难效仿
React+redux+react-router同构Blog

直接提几点技术上的疑惑吧：

  1. react作为view层渲染，这里面的渲染分为node端、浏览器端

    • 问题：其实使用react是不是都加多了一个node端作为中间层？

  2. 大家是怎样在react上搭配使用redux和Router的？acdlite大神，出了redux-router，不过不知道值不值得一试。因为连他本人也说这是一个实验性的项目。

  3. 向后台请求数据，是不是还要用fetchData。。。之类的，不是很懂

  4. 感觉还有很多知识点要补——中间件、redux的异步action等等，有点混乱，希望有经验的前辈分享一下。使用react必然需要接受它整套技术栈，不过现在我是走一步，学一步，整条技术栈不明确，话句话说，就是不知道自己需要 学什么，还 缺什么

#3
  1. 如果你的页面不算太复杂可以不用后台渲染
  2. react-router个人强烈推荐使用，至少目前没有更好的方案，再搭配react-router-redux使用，可以很方便的获取参数
  3. 后台交互这一块，我们公司的实践是抽象了一层API（至于请求使用ajax还是fetch随你自己高兴就好，还是推荐isomorphic-fetch），在action里面去调api，你需要构造一类专门处理async请求的action，它应该会dispatch三个正常的action出去，一个是准备发请求的，一个是成功的，一个是失败的
  4. 先设计state tree，根据这个去设计你的reducer，坚持一个原则：所有的更改state的逻辑只能发生在reducer里面
1 Like
#4

如果你的项目是一个中后端项目，推荐你看看我最近时间搭的框架react+redux+react-router 中后台框架，里边前端部分完全可以复用。

另外
1、并不是所有的项目都需要服务器端渲染，这是一个递进的过程，你可以先把项目做出来，如果后期对性能有高要求，在逐步改进，react前端渲染改后端渲染并不复杂。
2、个人觉得redux-router 确实有不完美之处，如对路由跳转设置全局监听等。但总体来看还是很不错的，配置优雅，符合react编程习惯。
3、react并不关系你是用什么方式去请求后端，这个你可以根据个人喜好
4、redux确实好，无论从思想还是单元测试的角度，但是不可否认的是入门难，尤其是理解各种消息注册监听，建议你先从reflux开始学起，当你熟悉了reflux之后，再来看看redux，或许会有豁然开朗的感觉

#5

@sxlfzhy @loveholly

感谢两位的建议，周末没有在电脑前，没有及时回复，深表歉意。

参考了
A Simple Way to Route with Redux
react-router-redux

我会先尝试用react-router-redux来衔接redux和react-router。

还是会试试其它的方法，多踩踩坑，积累经验。

#6

边学 边做 想太多反而容易乱 因为毕竟是新东西 你可以先上react,redux,router这些应该够你做个SPA了。只有学到后面你会发现你需要这个需要那个。在慢慢修改补充。

#7

非常感谢楼主的提问！
我的情况和楼主极其相似！
学习学习，谢谢！