react-redux框架及其源码分析

react-redux框图

        咱们在action中所写的dispatch之因此可以调用store.dispatch方法是由于，mapDispatchToProps方法将action中方法做为属性传递到connect中，connect将store.dispatch传入action方法，同时connect建立了当前组件的父组件，action中方法做为父组件属性，当前组件使用props获取传入store.dispatch的action方法。

技术栈：

    react-redux须要学习那些知识：

            ES六、webpack打包工具、react、redux、UI框架、路由等

首先重点介绍react

react数据传递方式

1.内部传递：采用state传递

  getInitialState: function () {  
    return {  
      checked: false  
    };  
  },  
  render: function() {  
    return (  
      <ToggleButton text="Toggle me" checked={this.state.checked} />  
    );  
  }

2.父组件向子组件传递：采用props传递

// 父组件 
<ToggleButton text="Toggle me"  />  
//子组件
render: function () {  
    var text = this.props.text;  
    return (  
        <label>{text}</label>  
    );  
  }  

3.子组件向父组件传递：调用子组件对象的方法传递

//子组件
var Child = React.createClass({
    render: function(){
        return (
            <div>
                请输入邮箱：<input onChange={this.props.handleEmail}/>
            </div>
        )
    }
});
//父组件，此处经过event.target.value获取子组件的值
var Parent = React.createClass({
    getInitialState: function(){
        return {
            email: ''
        }
    },
    handleEmail: function(event){
        this.setState({email: event.target.value});
    },
    render: function(){
        return (
            <div>
                <div>用户邮箱：{this.state.email}</div>
                <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
            </div>
        )
    }
});
React.render(
  <Parent />,
  document.getElementById('test')
);

4.跨组件传递：Context传递

    咱们看下Provider源码：其中（react生命周期）constructor经过props方式获取父类的属性store，而后getChildContext()声明context，验证组件信息Provider.propTypes，最后声明了childrenContextTypes，使得子组件可以经过定义ContextTypes 获取其内定义的store，若是不声明的话，将没法在组件中使用getChildContext()方法；

class Provider extends Component {
        getChildContext() {
          return { store: this.store }
        }

        constructor(props, context) {
          super(props, context)
          this.store = props.store;
        }
        render() {
          return Children.only(this.props.children)
        }
    }
    Provider.propTypes = {
        store: storeShape.isRequired,
        children: PropTypes.element.isRequired,
    }
    Provider.childContextTypes = {
        store: storeShape.isRequired,
    }

}

5.ref传递

<input ref="myInput" />
var input = this.refs.myInput;
var inputValue = input.value;

react生命周期

初始化

constructor:在装载以前使用，初始化操做，es6语法

componentWillMount:在render以前被调用，在渲染以前作一些准备

render:返回reactElement对象，渲染页面

componentDidMount:在render后调用，能够获取DOM结构，或者AJAX等请求

组件props更新

componentWillReceiveProps(nextProps):接收新的props出发，传入新的props，和以前this.props比较，来决定是否渲染

shouldComponentUpdate:render以前使用，返回bool值，决定组件更新，若是为FALSE，以前的操做不会触发

componentWillUpdate:渲染以前操做，与componentWillMount相似

render:从新渲染组件

componentDidUpdate:从新渲染后调用与componentDidMount相似

组件卸载

componentWillUnmount:卸载组件和销毁以前调用

redux组成

Action

Action 就是 View 发出的事件通知，表示 State 应该要发生变化了。 Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其余属性为信息的载体即要传递的信息。

Action Creator为一个函数，用来生成 Action的函数。

function addTodo(text) {
                     return {
                          type: ‘ADD_TODO’,
                          text
                             }
                        }

Reducer

Store 收到 Action 之后，须要给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫作 Reducer。 Reducer 是一个函数，它接受 Action 和当前 State 做为参数，返回一个新的 State

Store

Store 就是保存数据的地方。整个应用只能有一个 Store。Redux 提供createStore这个函数，用来生成 Store。Store主要有三个方法，

dispatch：分发action

subscribe：注册listener，监听state变化

getState：读取store tree中的state

Redux经过全局惟一的store对象管理项目中的state。经过store注册listener，注册的listener会在store tree每次变动后执行。reducer执行后返回的新状态会更新到store tree中，触发由store.subscribe()注册的全部listener。

createstore源码 

export default function createStore(reducer, preloadedState, enhancer) {

   //这地方是说若是preloadedState是一个函数，enhancer加强没有定义则交换
  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState
    preloadedState = undefined
  }
//交换后enhancer定义，将(createStore)(reducer, preloadedState)做为applyMiddleware中间件参数
  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.')
    }
    return enhancer(createStore)(reducer, preloadedState)
  }
                function dispatch(action) {
                  let currentReducer = reducer
                  let currentState = preloadedState
                  try {
                    currentState = currentReducer(currentState, action)
                  } finally {
                      ...
                  }
                  const listeners = currentListeners = nextListeners
                  for (let i = 0; i < listeners.length; i++) {
                    const listener = listeners[i]
                    listener()
                  }
                  return action
                  }
                }
                function getState() {
                  return currentState
                }
                function subscribe(listener) {
                  let isSubscribed = true
                  ensureCanMutateNextListeners()
                  nextListeners.push(listener)
                  return function unsubscribe() {
                    if (!isSubscribed) {
                      return
                    }
                    isSubscribed = false
                    ensureCanMutateNextListeners()
                    const index = nextListeners.indexOf(listener)
                    nextListeners.splice(index, 1)
                  }
                }
            }

如何建立一个store：

首先建立reducer，将多个reducer合并，combineReducer其实就是建立一个大的reducers，传入state和action，进行遍历原先的reducer。

而后选择须要的中间件，中间件为了重写dispatch，后面进行分析中间件源码

import compose from './compose'
export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    const store = createStore(reducer, preloadedState, enhancer)
    let dispatch = store.dispatch
    let chain = []

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)
//返回store和重写的dispatch
    return {
      ...store,
      dispatch
    }
  }
}