Как прослушать изменение состояния редукса из компонента app.js (root) - PullRequest
Новая
       6

Как прослушать изменение состояния редукса из компонента app.js (root)

0 голосов
/ 25 сентября 2018

Как прослушать изменение состояния редукса из компонента app.js (root)?

Привет,

Я хочу вызвать асинхронную функцию, которая записывает в Firestore DB, когда она существуетконкретный объект в состоянии.

Я подумал, что способ сделать это - поместить логику в корневой компонент приложения (index.js), потому что мне нужно вызвать его, если выполняется условие независимо от того, какой компонент экранаopen.

это мое приложение. Компонент: 

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

Я искалкак явно передать магазин как реквизит для подключения, но я пока не могу заставить его работать.

Может кто-нибудь пролить свет на этого новичка?

1 Ответ

0 голосов
/ 25 сентября 2018

Вы должны использовать 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')
    )
 })
...