手写React-Redux核心原理，再也不怕面试官问我React-Redux原理记录分享。一、redux和React-redux的几个重要概念1.1actionAction是应用程序传输数据的有效方式（这里之所以不叫view是因为数据可能是服务器响应，用户输入或者其他非视图数据)到商店负载。它是商店数据的唯一来源。通常，您通过store.dispatch()将操作传递给商店。1.2reducerReducers指定了应用程序状态的变化如何响应动作并将它们发送到store。请记住，操作仅描述发生某事的事实，而不描述应用程序如何更新状态。1.3Storestore是将action和reducer链接在一起的对象。Store本质上是一棵状态树，保存了所有对象的状态。任何UI组件都可以直接从存储中访问特定对象的状态。在Redux中，所有的数据（比如state）都存储在一个store容器中，一个应用中只能有一个store对象。当store接收到一个动作时，它会将动作委托给关联的reducer。reducer是一个纯函数，它查看先前的状态，执行操作并返回新状态。1.4ProviderProvider其实只是一个外层容器，它的作用是配合connect实现数据的跨层传递。使用时，只需要将Provider定义为整个项目的最外层组件，并设置store即可。那么整个项目就可以直接获取这个store了。它的原理其实是通过React中的[Context]()来实现的。其大致核心代码如下：)this.state={}}render(){returnthis.props.children}}Provider.childContextTypes={store:PropTypes.object}1.5connectconnect的作用是连接React组件和Reduxstore，包裹在我们的容器外面components一层，它接收上面Provider提供的store中的state和dispatch，传递给构造器，返回一个对象，以属性的形式传递给我们的容器组件。它有四个参数mapStateToProps、mapDispatchToProps、mergeProps和options。mapStateToProps的作用是将store中的state（数据源）绑定到指定组件的props上。mapDispatchToProps的作用是将store中的action（操作数据的方法）绑定到指定组件的props上。一般情况如果你不会用，这里就不介绍了。.那么connect是如何连接React组件和Reduxstore的呢？其主要逻辑可以概括为如下代码：{constructor(){super()this.state={}}componentWillMount(){this.unSubscribe=this.context.store.subscribe(()=>{this.setState(mapStateToProps(this.context.store.getState()))})}componentWillUnmount(){this.unSubscribe()}render(){return
