Saturday, April 13, 2024
 Popular · Latest · Hot · Upcoming
3
rated 0 times [  4] [ 1]  / answers: 1 / hits: 5583  / 4 Years ago, wed, june 3, 2020, 12:00:00

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 ?


More From » reactjs

 Answers
4

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


[#3591] Sunday, May 31, 2020, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
alorac

Total Points: 262
Total Questions: 82
Total Answers: 97

Location: Libya
Member since Mon, Dec 7, 2020
3 Years ago
alorac questions
Sat, Oct 10, 20, 00:00, 4 Years ago
Tue, Sep 22, 20, 00:00, 4 Years ago
Wed, Jul 1, 20, 00:00, 4 Years ago
Sun, May 17, 20, 00:00, 4 Years ago
Wed, Mar 4, 20, 00:00, 4 Years ago
;