rn 集成redux

叁歲伎倆 2021-07-24 20:28 413阅读 0赞

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)