React之Redux基础

前言： 看了一个多星期的JS，结果没想到花在React生态上的时间却超过了一个月，之前天真的以为前端不过是Html Css JS凑在一起而已。看来我现在的观点已经是相当的落后了，花了一个星期看完了React，原以为就可以直接上手了，结果发现除了做一些小页面Demo，React一句话说穿就只是一个视图层。既然踏入了React生态圈，想要工程上使用至少要使用React Redux React-router。

Redux基础概念： 在写了一些Reacr页面后，就会出现状态管理的问题，在React中有两个属性 Props State用来作为组件的属性。

• Prop通常是父组件传给子组件的。
• State自己控制 通过setState来更新属性。

通常在会出现数据是一些组件需要共同持有的，在React中的原生的解决方案状态提升--将这些共同的属性提取出来，放在组件的父组件中，如果两个组件需要同步数据，通常React的原生写法则是一个组件更新父组件的数据,然后回调数据更新到另外一个组件中。当页面相当的复杂的时候，你会发现React其实没有比较好的方法。

Flux 框架

React官方提供了一个Flux数据流单方向流动框架，我们首先介绍一下Flux的基础概念

• View ： 视图层
• Action ： 视图层发出的消息
• Dispatcher； 用来接受Actions 执行回调函数
• Store: 用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

Flux提出的是一种框架概念，而Redux则是遵循Flux框架去实现的一个状态管理框架，Redux当然有自己实现中不同之处，比如Redux 通常只有一个Store存储所有的数据，没有所谓的Dispatcher转到是Reducers来实现。

bg2016011503.png

React中的Context

React中有一个属性Context，了解它对于我们接下来要介绍的React-redux很有好处，前面讲到了关于 组件，现在假如所有的组件都有一个主题颜色（ThemeColor），如果是原生的编写我们需要每层都写props.themeColor，如果我们的组件树层数很深的话，这样维护起来简直就是灾难。如果有一个全局变量来存储这个变化就好了。

03118DDD-60E3-469A-AB78-5FBE57425E30.png

React中的Context则就是这样的一个东西，只要某一个组件放了某些状态，这个组件之下的所有子组件都可以直接访问这个状态。一个组件的Context只能被它的子组件访问，它的父组件是不能访问的。

3BC6BDFC-5772-4045-943B-15FBEC28DAC0.png

Redux基本概念

在学习Redux的时候，在这里卡了很长时间，当然我现在不敢把握说清楚，首先我们先了解具体中React-redux中的一些特有名词。

• Store: 全局变量 用来存储所有的数据 通过createStore方法产生 通常有属性 state dispatch r
• Provider: 顶部组件， Store便是Provider组件的属性
• Action： 普通的JS对象，规定对象中必有 type
• connect: 高阶函数 从Context中获取数据 然后通过函数mapStateToProps等方法 传给Dumb组件
• Reducer: 纯函数 createStore方法接受的参数便是Reducer, Reducer的两个参数 state 一个action