Как использовать mapStateToProps в файле app.js?

Question

Я использую реагирующий нативный маршрутизатор для навигации в моем приложении. И я использую redux и response-redux для доступа к некоторым переменным состояния.

Используя приведенное ниже утверждение, в моем приложении нормально работает избыточная функциональность.

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

Есть ли способ использовать mapStateToProps в самом файле App.js?

Я использую пакет response-native-i18n 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

connect() Функция работает только в компонентах, которые находятся внутри <Provider> тег, так что вы не можете использовать его в своем App.js так как вы создаете магазин и предоставляете его App.jsдети

При этом вам не нужно использовать mapStateToProps просто получить доступ к состоянию с помощью store.getState() а также store.dispatch(),

Answer 2

Как уже упоминалось @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>
        ) 
      }
    }

Надеюсь, поможет!