React native 如何从app.js组件（root）侦听redux状态更改

如何从app.js组件（root）侦听redux状态更改

你好

我想触发一个异步函数，当存在状态为的特定对象时，该函数在Firestore DB中写入

我认为这样做的方法是将逻辑放在根应用程序组件（index.js）中，因为无论哪个屏幕组件打开，如果条件满足，我都需要触发它

这是我的appComponent：

import { Provider } from 'react-redux';
import configureStore from './store/configureStore';

const store = configureStore();

export default class App extends React.Component {
    render() {

    //navigators were removed for code brevity and component imports

    const MainNavigator = TabNavigator({
      welcome: { screen: WelcomeScreen },
      login: { screen: LoginScreen },
      signup: { screen: RegisterScreen },
      main: { screen: AppNavigator },
  }, {
    navigationOptions: {
      tabBarVisible: false
    },
  });

    return (
      <Provider store={store}>
        <View style={{ flex: 1 }}>
          {/*<ModalAlerta />*/}
          <StatusBar hidden />
          <MainNavigator />
        </View>
      </Provider>
    );
  }
}

---版末

我认为使用componentWillReceiveProps（）可以做到这一点，但它没有被调用。由于我没有看到生命周期方法的任何日志，我意识到状态和道具不会像在子组件中那样绑定在这里（原因是没有参与），所以我尝试使用connect（）将应用程序组件连接为任何其他组件

当我尝试这样做时，我是这样做的：

import { Provider } from 'react-redux';

//I removed the export statement from here to bottom
class App extends React.Component {

    componentWillReceiveProps(nextProps) {
        //Did not get triggered
        console.log(nextProps);
    }
    render() {

    //navigators were removed for code brevity and component imports

    const MainNavigator = TabNavigator({
      welcome: { screen: WelcomeScreen },
      login: { screen: LoginScreen },
      signup: { screen: RegisterScreen },
      main: { screen: AppNavigator },
  }, {
    navigationOptions: {
      tabBarVisible: false
    },
  });

    return (
      <Provider store={store}>
        <View style={{ flex: 1 }}>
          {/*<ModalAlerta />*/}
          <StatusBar hidden />
          <MainNavigator />
        </View>
      </Provider>
    );
  }
}

const mapStateToProps = state => {
  return {
    factura: state.facturacion.factura[0]
  };
};

export default connect(mapStateToProps, { })(App);

从'react redux'导入{Provider}；
//我把出口声明从这里移到了底部
类应用程序扩展了React.Component{
组件将接收道具（下一步）{
//没有被触发
console.log（nextrops）；
}
render（）{
//为了代码简洁和组件导入，已删除导航器
const main navigator=TabNavigator({
欢迎：{screen:WelcomeScreen}，
登录：{screen:LoginScreen}，
注册：{screen:RegisterScreen}，
主：{屏幕：AppNavigator}，
}, {
导航选项：{
tabBarVisible:错误
},
});
返回(
{/**/}
);
}
}
常量mapStateToProps=状态=>{
返回{
factura:state.facturacion.factura[0]
};
};
导出默认连接（mapStateToProps，{}）（应用程序）；

但这是我得到的错误：

Error: Invariant Violation: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(App)".

错误：不变冲突：在“连接（应用）”的上下文或道具中找不到“存储”。将根组件包装在中，或者将“store”作为道具显式传递给“Connect（App）”。

我一直在寻找如何明确地通过商店作为道具连接，但我还不能让它工作

---

有人能给这个新手带来一些启发吗？

你必须先使用createStore（）创建你的商店，然后再通过它。此外，正如错误所述，您需要“将根组件（应用程序）包装到提供程序中…”

在index.js中，确保您有类似的内容

...
import {createStore} from 'redux'
import {Provider} from 'react-redux'

import App from './App'
import reducer from './reducer'


const store = createStore(reducer)

document.addEventListener('DOMContentLoaded', () => {
   render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('app')
    )
 })

。。。
从“redux”导入{createStore}
从“react redux”导入{Provider}
从“./App”导入应用程序
从“./reducer”导入减速机
const store=createStore（reducer）
document.addEventListener（'DOMContentLoaded'，（）=>{
渲染(
,
document.getElementById（'app'）
)
})

对不起，我错过了那个信息。我已经在其他文件中创建了存储并作为函数导入。我想我已经有你的建议了。我该怎么办？我会尝试将提供程序移动到index.js并将其环绕在应用程序组件上。提供程序已经在index.js的navigator中环绕应用程序组件。但是我无法检测到任何状态变化：（在不同的时刻读了你的答案几遍之后，现在我明白了你的意思。它确实起作用了。非常感谢你的时间！不用担心。很高兴你明白了。

...
import {createStore} from 'redux'
import {Provider} from 'react-redux'

import App from './App'
import reducer from './reducer'


const store = createStore(reducer)

document.addEventListener('DOMContentLoaded', () => {
   render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('app')
    )
 })