CODEWITHSUNDEEP
redux
Gambit2007
Gambit2007

Reputation: 3988

Redux - how to access the store "dispatch" after providing it with Provider?

I have the following files:

index.js

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

The App component: (App.js)

const App = withRouter(connect(mapStateToProps, mapDispatchToProps)(Main))
export default App

So then how i can access store.dispatch inside of the Main component? If i try to do it by store.dispatch({...}) i get:

'store' is not defined no-undef

Upvotes: 0

Views: 545

Answers (3)

brietsparks
brietsparks

Reputation: 5016

If mapDispatchToProps looks like:

const mapDispatchToProps = dispatch => ({
    myAction1: () => dispatch(myAction1())
});

connect(mapStateToProps, mapDispatchToProps)(Main)

...then in the component, you can call this.props.myAction1()

If mapDispatchToProps uses bindActionCreators:

const actions = { myAction1, myAction2 };

const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);

...then in the component, you can call this.props.myAction1() and this.props.myAction2()

If mapDispatchToProps is undefined:

connect(mapStateToProps)(Main)

then in the component, you can access this.props.dispatch

Upvotes: 1

markerikson
markerikson

Reputation: 67499

Your component shouldn't access the store directly - connect abstracts that away.

Please see our new React-Redux docs page on connect: Dispatching Actions with mapDispatchToProps for a complete description of how to handle dispatching actions.

Upvotes: 0

AlbertS
AlbertS

Reputation: 736

dispatch function should be available through this.props this.props.dispatch()

Upvotes: 0

Related Questions