进击reactjs（2）-----对目前reactjs两种主流管理状态的理解（redux管理状态）

我接触react也有两年多的时间了，react目前的主流的管理状态的方式也都在项目中用过（redux和mobx）,对这两种管理状态的方式也有自己一定的理解，所以在这分享一下。

首先我最开始接触react是接触的redux这个管理状态的方式，redux这种方式更像在前台建立一个自己前台的后台，类似于原来那种前后台不分离的mvc的形式，，然后通过actions dispatch在页面触发该数据层里面的方法，这个触发过程先到store里面，然后到Reducers，通过回调把state里面的数据或状态进行刷新从而实现页面的刷新。

代码：

function mapStateToProps(state) {
  const { visible } = state
  const {
 
  }

  return {
   visible
  }
}

export default connect(map)(AsyncApp)

store存储的方式

state: {

visible: false,

 

}

这样是一个简单运用了redux store和connect把数据和model层和view进行了交互的一个过程，加入放在state里面的数据在页面的中用到，并且数据改变了，页面就实现了刷新，实际上这个机制还是react通过观察state状态从而实现页面的刷新，只是运用了redux可以更好的来处理后台接口调到的数据，从而在页面层直接进行渲染就行了，这种方式感觉和我原来用的那种mvc方式一样更容易理解一些

大致流程图：

                           action               action,state

action Creators---------------store---------------------Reducers

                                             |         new state

                                             |

                                  刷新页面组建compents