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

【问题标题】：How to use mapStateToProps in app.js file?如何在 app.js 文件中使用 mapStateToProps？
【发布时间】：2019-02-07 13:15:11
【问题描述】：

我在我的应用程序中使用 react-native 路由器 Flux 进行路由器导航。我正在使用 redux 和 react-redux 来访问一些状态变量。

使用以下语句，redux 功能在我的应用程序中运行良好。

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

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

我在我的应用程序中使用 react-native-i18n npm 包进行语言翻译。我将当前语言存储在 redux 商店中。因此，如果我在应用程序中更改语言，redux 存储中的变量将被更改，并且更改会反映在所有屏幕中。但是语言更改不会反映在标题和选项卡导航器中，因为它在我的 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);

【问题讨论】：

嗨@BrunoEduardo，感谢您的回复。我可以通过使用 store.getState() 来使用 store 变量的值。但是，当我在其他一些屏幕（App.js 除外）中更改 store 变量的值时，它并没有反映在 App.js 文件中。现在我该如何收听或订阅该状态更改？
你想监听你的标题组件的变化，对吧？
是的，我想听听标题和标签中的语言变化@BrunoEduardo
好吧，我们可能不得不在这个问题上有点头疼。我四处搜索，发现了一个问题线程，其中 Aksonov 告诉有类似问题的人将函数而不是值传递给标题，也许尝试这样做，看看会发生什么。这是链接：github.com/aksonov/react-native-router-flux/issues/2677

标签： react-native react-redux react-native-router-flux

【解决方案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>
        ) 
      }
    }

希望对你有帮助！

【讨论】：

【解决方案2】：

connect() 函数仅适用于 <Provider> 标记内的组件，因此您不能在 App.js 中使用它，因为您正在创建商店并将其提供给 App.js 的孩子.

话虽如此，您不需要使用mapStateToProps，只需使用store.getState() 和store.dispatch() 访问状态即可。

【讨论】：