rn 集成redux

1、创建redux
	创建过程和react相同
	
2、将store挂载到App组件上
	在index.js中创建一个新的类组件,该类组件中使用Provider包含App组件,并挂载store,然后挂载该类组件

3、组件内使用redux的数据
	引入connect连接,使用方式和之前相同

代码示例:
index.js:

import React, { Component } from 'react'
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

import { Provider } from 'react-redux'
import store from './app/store'

class NewApp extends Component {
  render() {
    return (
       // 挂载store,让app内部所有组件都可以使用
      <Provider store={store}>
        <App />
      </Provider>
    )
  }
}

AppRegistry.registerComponent(appName, () => NewApp);

组件内部使用redux数据:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
  Text,
  StyleSheet,
  View,
  StatusBar,
  Button
} from 'react-native'

import { change } from '../../../store/actionCreators'

class Popular extends Component {
  render() {
    return (
      <View>
        <StatusBar
          translucent={true} // 设置沉浸式状态栏 正常情况下 状态栏高度为20 这里的20 需要页面元素距离最上面 paddingTop:20
          backgroundColor={'rgba(0,0,0,0.1)'} // 设置状态栏颜色
          animated={true} // 允许动画切换效果
        />
        <Text>{this.props.data}</Text>
        <Button title="更新state" onPress={this.props.changeData} />
        <Button
          title="获取state"
          onPress={() => {
            console.log(this.props.data)
          }}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({})

const mapState = state => ({
  data: state.data
})

const mapDispatch = dispatch => ({
  changeData() {
    dispatch(change())
  }
})

export default connect(
  mapState,
  mapDispatch
)(Popular)