I want to dispatch an action to update my application's global state with the currently signed in user. When a user clicks a button, an event handler fires that is registered in mapDispatchToProps, and then I want to dispatch an action (article.updateAuthor(currentUser)). However, In mapDispatchToProps I have no access to the state to get the current user, and I do not want to arbitrarily pass the currently signed in user to a ponent prop -- only to be passed to the click event above, which will then pass the user data to a dispatched action.

I know I can dispatch an action with a redux thunk which gives me access to the state. However, this seems rather heavy handed seeing as there are no API calls being made.

Has anyone ran into this problem before?

I want to dispatch an action to update my application's global state with the currently signed in user. When a user clicks a button, an event handler fires that is registered in mapDispatchToProps, and then I want to dispatch an action (article.updateAuthor(currentUser)). However, In mapDispatchToProps I have no access to the state to get the current user, and I do not want to arbitrarily pass the currently signed in user to a ponent prop -- only to be passed to the click event above, which will then pass the user data to a dispatched action.

I know I can dispatch an action with a redux thunk which gives me access to the state. However, this seems rather heavy handed seeing as there are no API calls being made.

Has anyone ran into this problem before?

• javascript
• redux
• redux-thunk

Share Improve this question Follow edited May 31, 2017 at 18:47 GibboK 74k148148 gold badges451451 silver badges674674 bronze badges asked May 31, 2017 at 18:39 robskrobrobskrob 2,92877 gold badges3434 silver badges6161 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

In the connect function provided by react-redux you have four optional arguments you can use:

• mapStateToProps
• mapDispatchToProps
• mergeProps (this one will give you what you want)
• options

From the documentation for mergeProps:

If specified, it is passed the result of mapStateToProps(), mapDispatchToProps(), and the parent props. The plain object you return from it will be passed as props to the wrapped ponent. You may specify this function to select a slice of the state based on props, or to bind action creators to a particular variable from props

So in your case you'll use mapStateToProps to access what ever portion of the global state you need. The result will be passed to mergeProps as the stateProps argument.

In mergeProps do what you need to do with this state, use the result of dispatchProps (or destructure dispatch from it) and return the object you need in the ponent you want to connect to.

You could consider importing your store and use store.getState(), in this way you have access to your "global" store.

But please keep in mind that this approach is not recanded and you rather should use mergeProps as suggested by @markerikson answer if you are using connect.

getState()

Returns the current state tree of your application. It is equal to the last value returned by the store's reducer. Source.

Pseudo code:

import store from 'store'
store.getState().yourReducer.user.current

You can't. mapDispatch is deliberately not given access to the state, because you generally use mapDispatch to create bound functions, and doing so based on state would continually cause those functions to get re-created when the state changes.

If you really want to do that, you can use the third argument to connect, known as mergeProps, but this should generally only be used as a last resort.

The remended approaches are:

• Extract relevant data in mapState, and have the ponent call this.props.someFunction(this.props.someRelatedValue)
• Use a thunk and access the state in there

Overall, accessing the state in a thunk is a pletely valid and supported capability. Some people have raised concerns about whether doing so is a good idea, and I addressed those concerns in my blog post Idiomatic Redux: Thoughts on Thunks, Sagas, Abstraction, and Reusability.

It is ridiculous that the state cannot be accessed in mapDispatchToProps.

There is an alternative to redux, the Dynadux, which is simple and solves Redux's cumbersome.

Also, ispatches can be fired from reducers without Thunk.