如何使用mapStateToProps在app.js文件？

Question

我使用的路由器导航反应本地路由器通量我的应用程序。而我使用的终极版和反应，终极版的访问某些状态变量。

使用下面的语句，终极版的功能在我的应用程序工作正常。

export default connect(mapStateToProps,mapDispatchToProps)(ComponentName);

有没有办法使用在App.js mapStateToProps文件本身的方法吗？

我使用的反应母语 - 国际化NPM包在我的应用程序语言翻译。而且我存储终极版店内当前语言。所以，如果我在我的应用程序切换语言，在终极版店内的变量将被改变，变化反映在所有屏幕。但语言的变化不会反映到标题和标签导航，因为它在我的app.js文件。

如何听在app.js文件中的状态变化？

PFA我App.js文件和样本文件（Screen2.js）文件。

提前致谢！！！

App.js文件：

import React, { Component } from 'react';
import { Provider,connect } from 'react-redux';
import I18n from './locale/i18n';
import store from './Reducers/index';
import { Actions, ActionConst, Router, Scene } from 'react-native-router-flux';

const ConnectedRouter = connect()(Router);

let Scenes = Actions.create(
  <Scene key="root">
    <Scene key='Screen1' hideNavBar title='Screen1' component={Screen1}></Scene>
    <Scene key="tabbar" tabs={true}>
      <Scene key="tab1" title={I18n.t('TabTile1')} icon={CustomComponenet} initial> 
        <Scene key="Screen2" component={Screen2} title="Screen2" initial/>
        <Scene key="Screen3" component={Screen3} title="Screen3"/>
      </Scene>

      <Scene key="tab2" title={I18n.t('TabTile2')} icon={CustomComponenet} initial>
        <Scene key="Screen4" component={Screen4} title="Screen4" initial/>
        <Scene key="Screen5" component={Screen5} title="Screen5"/>
      </Scene>
    </Scene>
  </Scene>
)

export default class App extends Component {     
  render() {
    return(
      <Provider store={store}>
        <ConnectedRouter scenes={Scenes} />
      </Provider>
    ) 
  }
}

Screen2.js：

import React from 'react';
import I18n from '../locale/i18n'
import { Actions} from 'react-native-router-flux';
import { connect } from 'react-redux';
import * as actions from '../Actions/ActionTypes'

class Dashboard extends React.Component{

render(){
  I18n.locale = this.props.language;

  return(
    <View>.....</View>
  )
}

const mapStateToProps = (state) => ({
    language: state.Reducer.language,
});
export default connect(mapStateToProps)(Screen2);

Answer 1

正如@BrunoEduardo所提到的，而不是值传递给头，现在我使用定制报头，其中，所述语言改变被反射。

HeaderComponent.js：

class HeaderComponent extends React.Component {
      render(){    
          return (
              <View height={25}>
                  <Text>{I18n.t(this.props.title)}</Text>
              </View>
            );
      }
    }

    const mapStateToProps = (state) => ({
      language: state.Reducer.language,
    });

    export default connect(mapStateToProps)(HeaderComponent);    

App.js：

import React, { Component } from 'react';
    import { Provider,connect } from 'react-redux';
    import I18n from './locale/i18n';
    import store from './Reducers/index';
    import { Actions, ActionConst, Router, Scene } from 'react-native-router-flux';

    const ConnectedRouter = connect()(Router);

    let Scenes = Actions.create(
      <Scene key="root">
        <Scene key='Screen1' hideNavBar title='Screen1' component={Screen1}></Scene>
        <Scene key="tabbar" tabs={true}>
          <Scene key="tab1" title='tabtitle1' icon={CustomComponenet} initial> 
            <Scene key="Screen2" component={Screen2} title="Screen2" navBar={HeaderComponent} initial/>
            <Scene key="Screen3" component={Screen3} title="Screen3" navBar={HeaderComponent}/>
          </Scene>

          <Scene key="tab2" title='tabtitle2' icon={CustomComponenet} initial>
            <Scene key="Screen4" component={Screen4} title="Screen4" navBar={HeaderComponent} initial/>
            <Scene key="Screen5" component={Screen5} title="Screen5" navBar={HeaderComponent}/>
          </Scene>
        </Scene>
      </Scene>
    )

    export default class App extends Component {     
      render() {
        return(
          <Provider store={store}>
            <ConnectedRouter scenes={Scenes} />
          </Provider>
        ) 
      }
    }

希望能帮助到你！

Answer 2

该connect()功能仅是一个<Provider>标签内的部件，这样以来你所创建的存储和提供它App.js的孩子，你不能在你的App.js使用它。

话虽这么说，你不需要使用mapStateToProps只需使用store.getState()和store.dispatch()访问状态。