I'm using redux for statemanagement in react project and I access redux reducer file states in ponents like this :

Component.js

import { buyItem } from './itemActions';
import { connect } from 'react-redux';

function Comp(props) {
    return (
        <div>
            <h3>{props.numOfItems}</h3>
            <button onClick={() => props.buyItem('red')}>
                Click
            </button>
        </div>
    );
}

const mapState = (state) => {
    return {
        numOfItems: state.numOfItems
    };
};

const mapDis = (dispatch) => {
    return {
        buyItem: (name) => dispatch(buyItem(name))
    };
};

export default connect(mapState, mapDis)(Component);

And this is the reducer file which holds all the states :

import { BUY_ITEM } from './itemTypes';

const initialState = {
    numOfItems: 0,
    price: 0,
}

export const itemReducer = (state = initialState, action) => {
    switch (action.type) {
        case BUY_ITEM:
            return {
                ...state,
                price: state.price + state.products[action.payload].price,
            };
        default:
            return state;
    }
};

export default itemReducer;

And this is the redux action file :

import { BUY_ITEM } from './itemTypes';

export const buyItem = (name) => {
    return {
        type: BUY_ITEM,
        payload: name
    };
};

Now I want to access states and actions from index.js file but there is no export default method for it so I can import connect from redux and connect the index.js to redux .

this is the index.js file :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

How can I access states and call actions from index.js file ?

I'm using redux for statemanagement in react project and I access redux reducer file states in ponents like this :

Component.js

import { buyItem } from './itemActions';
import { connect } from 'react-redux';

function Comp(props) {
    return (
        <div>
            <h3>{props.numOfItems}</h3>
            <button onClick={() => props.buyItem('red')}>
                Click
            </button>
        </div>
    );
}

const mapState = (state) => {
    return {
        numOfItems: state.numOfItems
    };
};

const mapDis = (dispatch) => {
    return {
        buyItem: (name) => dispatch(buyItem(name))
    };
};

export default connect(mapState, mapDis)(Component);

And this is the reducer file which holds all the states :

import { BUY_ITEM } from './itemTypes';

const initialState = {
    numOfItems: 0,
    price: 0,
}

export const itemReducer = (state = initialState, action) => {
    switch (action.type) {
        case BUY_ITEM:
            return {
                ...state,
                price: state.price + state.products[action.payload].price,
            };
        default:
            return state;
    }
};

export default itemReducer;

And this is the redux action file :

import { BUY_ITEM } from './itemTypes';

export const buyItem = (name) => {
    return {
        type: BUY_ITEM,
        payload: name
    };
};

Now I want to access states and actions from index.js file but there is no export default method for it so I can import connect from redux and connect the index.js to redux .

this is the index.js file :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

How can I access states and call actions from index.js file ?

• javascript
• reactjs
• redux
• react-redux

Share Improve this question Follow asked Jun 3, 2020 at 15:46 Mehdi FarajiMehdi Faraji 3,9041010 gold badges4646 silver badges9696 bronze badges 2

• 1 You don't have a Provider with a store yet, why do you want to access states and actions in there? – Adam Jenkins Commented Jun 3, 2020 at 15:48
• For what particular reason you want to have actions and stores in index.js. You can simply move the Provider up into index.js and have your logic in App.js – Shubham Khatri Commented Jun 3, 2020 at 15:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

This is more of a ment, but it just illustrates that you're confused about redux.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { rootReducer } from './your.root.reducer';
import { App } from './App';

const store = createStore(rootReducer);

ReactDOM.render(
  <React.StrictMode>
   <Provider store={store}>
    <App />
   </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// Now inside App.js

export const App = () => {
    // ONLY NOW does it make sense to try to access the store/dispatch actions
}

It only makes sense to access actions/state once you are inside a Provider's tree

The ponent tree for the above looks (essentially) like this:

Root  
  -> Provider
    -> App // NOW IT MAKES SENSE TO ACCESS STATE

for a react-native project u can access it like this. I was trying to access user saved location and get it like this. cheers.

  notifee.registerForegroundService(notification => {
  let watchId = null;
  let state = null;
  store.subscribe(listener);
  function listener() {
    state = store.getState().locationAlertReducer;
  }
  return new Promise((resolve, reject) => {
    watchId = Geolocation.watchPosition(
      position => {
        if (state.alerts.length > 0) {
          state.alerts.map((item, index) => {
            getDistance({
              from: {lat: item.coords.latitude, lng: item.coords.longitude},
              to: {
                lat: position.coords.latitude,
                lng: position.coords.longitude,
              },
            }).then(distance => {
              if (parseInt(distance * 1000) < item.radius) {
                if (!item.is_notification) {
                  store.dispatch(
                    updateLocationAlertItem({
                      index: index,
                      is_in_radius: true,
                      is_notification: true,
                    }),
                  );
                  onDisplayNotification(item, distance);
                }
              } else {
                store.dispatch(
                  updateLocationAlertItem({
                    index: index,
                    is_in_radius: false,
                    is_notification: false,
                  }),
                );
                console.log('No Notificaion Send');
              }
            });
          });
        }
      },
      error => {},
      {enableHighAccuracy: false, timeout: 15000},
    );

    const unsubscribe = notifee.onForegroundEvent(async ({type, detail}) => {
      if (type === EventType.ACTION_PRESS && detail.pressAction.id === 'stop') {
        Geolocation.clearWatch(watchId);
        await notifee.stopForegroundService();
        unsubscribe();
        resolve();
      }
    });
  });
});