How to use Redux's Provider with React

Question

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)

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?

Answer 1

Thanks for the answer, but it is missing one crucial bit, which is actually in the documentation.

If contextTypes is not defined, then context will be an empty object.

So I had to add the following for it to work for me:

  static contextTypes = {
    store: PropTypes.object.isRequired
  }

Answer 2

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);
  }
}

Answer 3

To use Redux Provider with react.You need to use a module i.e

npm install --save react-redux

React-redux provide connect() method which helps in binding the store from the provider to React component.

Using method like mapDispatchToProps and mapStateToProps

we can create a condition in which the component is rendered .

Ex:

class Header extends Component 
{
    sendAlert = () => 

    render() {
        <div>
            <h1>Today's Fancy Alert is {this.props.fancyInfo}</h1>
            <Button onClick={sendAlert}/>
        </div>
    }
}

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

export default connect(state => state, mapDispatchToProps)(Header);

Now we get dispatch method provided by Provider and can use in our component to trigger any action

ex:

this.props.dispatch(
{
    //Any Object`enter code here`
})