Jacob Mason Jacob Mason - 10 months ago 54
React JSX Question

How to use Redux's Provider with React

I've been following the ReduxJS documentation here: http://redux.js.org/docs/basics/UsageWithReact.html

At the end of the document it mentions usage of the provider object, I have wrapped my App component in the provider like so:

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import RootReducer from './app/reducers'
import App from './app/app'

const store = createStore(RootReducer)

<Provider store={store}>
<App />

However, that's where the documentation ends. How do I pickup the store provided by provider within the components?

Answer Source

The best way to access your store through a component is using the connect() function, as described in the documentation. This allows you to map state and action creators to your component, and have them passed in automatically as your store updates. Additionally, by default it will pass in dispatch as this.props.dispatch. Here's an example from the docs:

import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {

const FilterLink = connect(

export default FilterLink

Note that connect actually creates a new component that wraps around your existing one!

Due to it having quite a few performance optimizations and generally being less likely to cause bugs, the Redux devs almost always recommend using connect over accessing the store directly - however, if you have a very good reason to need lower level access, the Provider component makes it so all its children can access the store through this.context:

class MyComponent {
  someMethod() {