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

Question

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

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

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

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

我在我的应用程序中使用 react-native-i18n npm 包进行语言翻译。我将当前语言存储在 redux 存储中。因此，如果我在应用程序中更改语言，Redux 存储中的变量将被更改，并且更改将反映在所有屏幕中。但是语言更改不会反映到标题和选项卡导航器中，因为它在我的应用程序.js文件中。

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

PFA 我的应用程序.js文件和示例文件(屏幕 2.js(文件。

提前谢谢!!

应用程序.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>
    ) 
  }
}

屏幕2.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所提到的，现在我使用的是自定义标头，而不是将值传递给标头，其中反映了语言更改。

标头组件.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);    

应用.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() 访问状态即可。