那么什么是MVC呢？
MVC是一种架构模式，同时也是一种思想，他的核心就是职责分离，它把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller），每个部分各司其职，从而达到轻松的分离业务操作、UI显示、逻辑控制这三个部分的目的。
视图View：指用户看到并与之交互的界面，比如由html元素组成的网页界面，或者软件的客户端界面。在视图中不会进行数据处理，它只是一个展示数据的界面，就是我们react项目的jsx代码。
模型Model：model是mvc架构的核心、表示业务模型或数据模型，指的是程序的业务逻辑，比如业务层面的算法实现、数据的管理、输出对象的封装等等。在我们的主页中相当于对api进行调用的代码，也就是componentDidMount这个函数，因为我们主页的业务逻辑都在这个函数中进行。
而controller控制器，将会接受用户的输入、并调用模型和视图去完成用户的请求处理；
控制器本身并不输出任何东西或对数据做任何处理。它只是接收用户请求、并决定调用哪个数据模型组件去处理数据，然后再根据模型的返回来确定使用哪个视图来显示数据。
而在react项目中controller的部分并不明显，因为react本身的定位就是一个ui框架，所以他理所当然就应该只专注于View对model的呈现。更准确的说，目前我们的架构是 MVC 的一个变种，叫做MVVM或者叫做MV*，这个whatever 星号表示最后的这个部分不重要，重要的是model和view这两个部分，如果同学们使用过angularjs，我说的是angularjs 1.8以下的版本，那么你可能会对MV*有更深入的理解。但是这个并不重要，因为在react项目中，我们并不提倡使用mvc的架构
MVC的问题
因为，虽然MVC的架构可以在一定程度上解决代码与数据耦合的问题，但是他的缺点也非常明显。因为 Model 直接对外暴露了数据的操作方式，导致视图层View可以随意改变 Model 中的数据，也可以随意监听 Model 中数据的变化。这样就导致了数据的双向绑定，最终可能导致数据流动陷入无限死循环。
所以，这也就是为什么纵观现在的主流开发框架，无论是vue、还是angular、还是react，都不约而同的抛弃了MVC的架构理念。
redux
而根据redux官方的标准，我们有必要在react项目中全面使用redux架构来处理所有的api，用以保证网站的所有数据，或者叫做状态state都是处于一个可控可预测的状态中。
那么在redux架构中，我们的项目做了什么事情呢？在设计React Component的时候，我们需要通过UI的布局来规划我们的Component，包括Component的分解与组合。
如果组件的业务逻辑要求操作或者修改某一个数据，那么对于Redux来说，其实就是发起一个action。
执行action的目的虽然是修改数据，不过在Redux中，我们会尽量希望遵循函数式编程的思想设计出所谓的“纯函数”，所有的数据操作都是通过reducer函数来完成的，而我们的数据也会在这里进行重塑或者叫做修改。一旦数据对象发生了变化，Redux就会通知React Component根据新的数据去重新渲染ui。
Redux 与 MVC 的关系
那么，Redux 与 MVC 有什么关系呢？准确来说，他俩之间完全没有关系。但是，我这么解释大家肯定理解不了。那么，接下来我强行给他们两拉一下关系。请同学们注意了，接下来我的说法是不准确的，只能说是帮助大家理解一下Redux 与 MVC这两种架构而已。
因为React是ui框架，那么显然他所办样的就是View的角色；而Redux负责控制数据流动，所以可以对应Controller；至于Model数据模型，很明显就是数据仓库 Store 中数据 State 以及 reducer，负责处理数据的变换。
当然，我们这样强行给redux和mvc划等号的行为本身就是错误的，因为他们完全是两个背道而驰的设计思路。在这里我想跟同学们表达的是从MVC模式的角度去思考React+Redux开发，所以同学们千万不要把mvc与redux画上等号
对于一个有良好架构的项目来说，使用那种设计模式或者架构方案并不是板上钉钉的事情，需要我们结合自己的业务需求、以及开发流程，在上手代码之前把需要做的每件事情都先想清楚，明确代码中每个部分的职责，做到业务与控制的分离、以及数据与ui的分离。
