React-Redux总结3-应用

我们开始进入正题了，Redux中专门为react提供了一个库叫做React-redux。你也可以直接使用redux, 但是使用react-redux后你会发现组件的代码更清晰，代码也更容易维护。
react-redux主要提供Provider和connet方便我们做组件的绑定。

1.Provider

因为我们应用只有一个store对象，Provider的作用是将我们生成的store对象传入到子组件中，方便子组件取到stroe对象中的数据，或者执行dispatch方法。
使用也非常简单：

import React, {Component} from 'react';
import MyNavigator from './MyNavigator';
import {initStore} from './store/InitStore';
import {Provider} from 'react-redux';
import {
    View,
    StyleSheet,
} from 'react-native';

export default class MyApp extends Component {
    static state: {
        isLoading: boolean;
        store: any;
    };

    constructor() {
        super();
        this.state = {
            isLoading: true,
            store: initStore(() => this.setState({isLoading: false})),
        };
    }

    render() {
        return(
            <Provider store={this.state.store}>
                <MyNavigator />
            </Provider>
        );
    }
}

它是通过react中getChildContext来实现传递的，具体getChildContext是如何实现传递这里就不做介绍了。

  Provider.prototype.getChildContext = function getChildContext() {
    return { store: this.store, storeSubscription: null };
  };

2.connect

connect帮助我们把组件和Provider中的store联系起来， 可以传入的参数有4个
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
我们先来看一段示例代码：

function mapStateToProps(store, ownProps) {
    return {
        isLoggedIn: store.user.isLoggedIn,
        name : store.user.username,
        pass: store.user.password,
    };
}

function mapDispatchToProps(dispatch) {
    return {
        onClickLoginButton: () => dispatch(loginIn)
    }
}

module.exports = connect(mapStateToProps, mapDispatchToProps)(LoginPage);

connect最后括号中的LoginPage不难理解是我们要绑定的组件，重要的是第一个括号内的两个fuction参数有什么作用：

mapStateToProps
mapStateToProps有两个参数store， ownProps。
reducer在每次state变化或者props变化时，store会调用这个方法并传入store自己和组件的props。
当你返回一个对象后，会把返回的对象映射到组件的props中！映射到组件的props中！映射到组件的props中！重要的说三遍，再刷新组件。这里我刚开始学习的时候以为映射到组件的state中，结果发现state对象中并没数据。

mapDispatchToProps
mapDispatchToProps作用和mapStateToProps相似，但是功能不太一样。
它返回对象里的值也会映射到props中，但是mapDispatchToProps的作用是方便我们做dipatch的绑定。
比如我们点击登录按钮要触发登录的Action, 我们就得执行dispatch(loginIn)，而mapDispatchToProps会帮我们将这个函数映射到props中，这样在组件中我们只需要通过以下方式就可以实现Action的发送，其作用主要还是将我们组件中Action操作进行统一管理。

<TouchableOpacity onPress={this.props.onClickLoginButton}>
      <Text style={styles.loginText}>登 录</Text>
</TouchableOpacity>

mergeProps和options很少用到，有兴趣的可以查看文档。

3. bindActionCreators

bindActionCreators个人感觉用的也不多，作用主要是方便我们将多个actions绑定到dispatch中， 这是redux提供的方法，并不在react-redux中。
如果使用的话上面的mapDispatchToProps可以改写成这样。

function mapDispatchToProps(dispatch) {
    return {
        onClickLoginButton:  bindActionCreators(loginIn, dispatch)
    }
}

它会对logIn这个Action进行dispatch包装，也就是说当使用bindActionCreators绑定后，只要执行logIn这个Action就相当于执行了dispatch(logIn)。
下面是bindActionCreators的源码，有兴趣的可以了解下：

export default function bindActionCreators(actionCreators, dispatch) {
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }

  if (typeof actionCreators !== 'object' || actionCreators === null) {
    throw new Error(
      `bindActionCreators expected an object or a function, instead received ${actionCreators === null ? 'null' : typeof actionCreators}. ` +
      `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`
    )
  }

  var keys = Object.keys(actionCreators)
  var boundActionCreators = {}
  for (var i = 0; i < keys.length; i++) {
    var key = keys[i]
    var actionCreator = actionCreators[key]
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  return boundActionCreators
}

OK，了解这些就可以在项目中使用redux了。