React Native with Navigationactions Redux Saga and Reactotron

Question

Good afternoon, I was trying to do a navigation inside a Redux action with the following code:

 export function* searchByID(action) {
  try {
    console.log('action', action);
    const response = yield call(apiGetProdutoByID, action.idProduto);

    console.log('produto', response);

    yield put({
      type: TypesProdutos.SEARCH_BY_ID,
      produto: response.data.data.obj,
    });

    const produto = yield select(state => state.produtos);
    console.log(produto);

    **yield put(
      NavigationActions.navigate({
        routeName: action.route,
        params: {produto: produto},
      }),**
    );
  } catch (error) {
    console.log(error);
    yield put({type: TypesProdutos.FAIL});
  }
}

However the bold line does not work, so I was advised to use debug with reactotron but when trying to integrate it into my project with the following codes:

Reactotronconfig.js file

import Reactotron from 'reactotron-react-native';
import AsyncStorage from '@react-native-community/async-storage';
import {reactotronRedux as reduxPlugin} from 'reactotron-redux';
import sagaPlugin from 'reactotron-redux-saga';

const reactotron = Reactotron;

Reactotron.setAsyncStorageHandler(AsyncStorage) // AsyncStorage would either come from `react-native` or `@react-native-community/async-storage` depending on where you get it from
  .configure() // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .use(reduxPlugin())
  .use(sagaPlugin())
  .connect(); // let's connect!

export default reactotron;

index js.

if (__DEV__) {
  import('./ReactotronConfig').then(() => console.log('Reactotron Configured'));
}
import {AppRegistry} from 'react-native';
import App from './src';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

index.js where I export the store

import {createStore, applyMiddleware} from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './ducks';
import rootSaga from './sagas';
import Reactotron from 'reactotron-react-native';

const sagaMonitor = Reactotron.createSagaMonitor;
const sagaMiddleware = createSagaMiddleware({sagaMonitor});

const middleware = applyMiddleware(sagaMiddleware);

const store = createStore(rootReducer, middleware);

sagaMiddleware.run(rootSaga);

export default store;

But the error appears:

Answer 1

After giving an npm install and changing the file that exports the store the app started running again.

import {createStore, applyMiddleware, compose} from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './ducks';
import rootSaga from './sagas';
import Reactotron from 'reactotron-react-native';
import ReactotronConfig from '../../ReactotronConfig';

const sagaMonitor = Reactotron.createSagaMonitor;
const sagaMiddleware = createSagaMiddleware({sagaMonitor});

const middleware = applyMiddleware(sagaMiddleware);

const store = createStore(
  rootReducer,
  compose(
    middleware,
    ReactotronConfig.createEnhancer(),
  ),
);

sagaMiddleware.run(rootSaga);

export default store;