How to get reference to store in react/redux?

Question

In my reactjs-universal component I wrote this:

const mapStateToProps = (store) => {
  return {
    cars: store
  }
}

export default connect(mapStateToProps)(SearchForm)

In the same component I would like to dispatch an action like :

 store.dispatch({type: 'SHOWDETAIL', data: 'hi'});

When this is run I get:

Uncaught TypeError: _create2.default.dispatch is not a function

Is it possible to get a reference to the store somehow in my component so I can dispatch the action?

Check out the simple ToDo app from the docs: http://redux.js.org/docs/basics/UsageWithReact.html — tomr, Jul 04 '17 at 13:08

score 3 · Accepted Answer · answered Jul 04 '17 at 13:08

3

connect will call mapStateToProps with the state as argument not the store.

It seems that in your case you don't need reference to the store, and using connect to map dispatch to the props is enough.

const mapStateToProps = (store) => {
  return {
    cars: store
  }
}

const mapDispatchToProps = dispatch => {
  return {
    action : () => dispatch({
      type : 'ACTION_NAME'
    })
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(SearchForm)

If you really want the store you should just export it from where you create it and import it where you need it, it isn't the purpose of connect to pass the store.

answered Jul 04 '17 at 13:08

Anis Smail

707
7
22

How do I actually dispatch the action then, I tried this.props.action() but does not do anything? – bier hier Jul 05 '17 at 00:26
that's weird this.props.action() should have worked, can you give a link to a codepen which reproduce the issue ? – Anis Smail Jul 05 '17 at 08:31

score 0 · Answer 2 · answered Jul 04 '17 at 13:09

0

You don't get a reference to the store object, but to the state inside of the store. The second parameter of the connect function is mapDispatchToProps. This gives you access to the dispatch function.

answered Jul 04 '17 at 13:09

Andreas Grünh

336
1
6

How to get reference to store in react/redux?

2 Answers2