How can I access react redux state in index.js file?

Question

I'm using redux for statemanagement in react project and I access redux reducer file states in components 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 ?

You don't have a Provider with a store yet, why do you want to access states and actions in there? — Adam
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

Adam Adam · Accepted Answer · 2020-06-03T15:56:37

This is more of a comment, 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 component tree for the above looks (essentially) like this:

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

How can I access react redux state in index.js file?

1 Answers