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了。
