How to use Redux's Provider with React

Question

I've been following the ReduxJS documentation here: Usage with React

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)

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

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

It shows you how to connect components to the store earlier in the tutorial - look at the section marked 'Container Components'. — Joe Clay
connect is the best/most reliable way to do it, unless you have a very good reason to go lower level (the guide mentions that connect has extra performance optimizations). That said, if you really want to access the store directly, Provider makes it so all child components can do so via the context - this.context.store inside your component should return this instance. — Joe Clay
I'll write a better formatted version of that up as an answer with some examples. — Joe Clay
@JacobMason You can’t use connect() without wrapping the root component in <Provider>. — lngs

Joe Clay Joe Clay · Accepted Answer · 2016-03-08T12:14:52

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: () => {
      dispatch(setVisibilityFilter(ownProps.filter))
    }
  }
}

const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

export default FilterLink

Note that connect actually creates a new component that wraps around your existing one! This pattern is called Higher-Order Components, and is generally the preferred way of extending a component's functionality in React (over stuff like inheritance or mixins).

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() {
    doSomethingWith(this.context.store);
  }
}

How to use Redux's Provider with React

2 Answers