How can I grab a value from a Redux store from outside of a component?

Question

I need to use the value of a store outside of a component.

Basically I have this:

// imports

import HomeScreen from '../screens/HomeScreen/HomeScreen';
import SettingsScreen from '../screens/SettingsScreen/SettingsScreen';

import FRoute from '../screens/HomeScreen/HomeScreen';
import SRoute from '../screens/SettingsScreen/SettingsScreen';

const HomeStack = createStackNavigator({
  PickupHome: HomeScreen,
});

const SettingsStack = createStackNavigator({
  PickupSettings: SettingsScreen,
});

export default createBottomTabNavigator({
  HomeStack,
  SettingsStack,
});

As you just saw, it is not a component. It is a file which contains my routes. It is named MainTabNavigator. With it, I need to do something like this:

import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

import HomeScreen from '../screens/HomeScreen/HomeScreen';
import SettingsScreen from '../screens/SettingsScreen/SettingsScreen';

import FRoute from '../screens/HomeScreen/HomeScreen';
import SRoute from '../screens/SettingsScreen/SettingsScreen';

const HomeStack = createStackNavigator({
  // HERE I NEED TO USE THE VALUE FROM THE STORE
  PickupHome: valueFromStore ? HomeScreen : FRoute,
});

const SettingsStack = createStackNavigator({
  // HERE I NEED TO USE THE VALUE FROM THE STORE
  PickupSettings: valueFromStore ? SettingsScreen : SRoute,
});

export default createBottomTabNavigator({
  HomeStack,
  SettingsStack,
});

As you can see, there is no way for me to call connect or any kind of thing where I can call the stores and pass them as a props as we would do it normally.

This is the reducer I have done:

import createReducer from '../../../redux/createReducer';
import ActionTypes from '../constants/ActionTypes';

const initialState = {
  navigation: {
    index: 0,
    routes: [
      { key: '1', title: 'Title 1' },
      { key: '2', title: 'Title 2' },
    ],
  },
};

const handlers = {
  [ActionTypes.INDEX_ROUTE](state, action) {
    return {
      ...state,
      navigation: {
        ...state.navigation,
        index: action.payload.index,
      },
    };
  },
};

export default createReducer(initialState, handlers);

And the action:

import ActionTypes from '../constants/ActionTypes';

export const indexRouteAction = index => ({
  type: ActionTypes.INDEX_ROUTE,
  payload: {
    index,
  },
});

export default indexRouteAction;

For example: I am using that store on another component and I can access its values like this:

export default compose(
  connect(
    store => ({
      navigationStore: store.homeScreen.navigation,
    }),
    dispatch => ({
      indexRouteActionHandler: data => {
        dispatch(indexRouteAction(data));
      },
    }),
  ),
)(withNavigation(TopTabView));

So I can grab the values from there and that's it.

So what else should I do in order to grab the values of that store on my file I posted first?

UPDATE:

I was reading about this: https://redux.js.org/api/store#getState But I don't know how to adapt that to my code and I don't know if that is solution that will work for my case. Any insights?

Answer 1

Somewhere in your code you will be creating store as below:

const store = createStore( ..reducers);

Export this fellow, import where you want to access store and then

store.getState().item // You can access store data