Question

如何从app.js组件（根）监听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>
    );
  }
}

---此片段已更新：

这是导入的configureStore（）：

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers';

let composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

  function configureStore(initialState) {
    const store = createStore(
      reducers,
      initialState,
      composeEnhancers(applyMiddleware(thunk)));

    return store;
  }

export default configureStore;

---版本结束

尽管我可以使用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);

但这是我得到的错误：

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)".

我一直在寻找如何明确地将商店作为连接的道具，但我仍然无法使它工作。

有人可以给这个新手带来启发吗？

Answer 1

您必须先使用createStore（）来创建商店，然后再传递它。此外，由于错误状态，您还需要“将根组件（App）包装在提供程序中...”

在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')
    )
 })

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

1 个答案: