Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use Redux's Provider with React

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?

like image 232
Jacob Mason Avatar asked Mar 08 '16 10:03

Jacob Mason


People also ask

What is the use of provider in react redux?

Overview​ The <Provider> component makes the Redux store available to any nested components that need to access the Redux store. Since any React component in a React Redux app can be connected to the store, most applications will render a <Provider> at the top level, with the entire app's component tree inside of it.

How do I import a provider into react native?

We write it the following way: import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import store from './store'; import App from './App'; const rootElement = document. getElementById('root'); ReactDOM. render( <Provider store={store}> <App /> </Provider>, rootElement );

How do I connect Redux With react?

The connect() function connects a React component to a Redux store. It provides its connected component with the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the store.


1 Answers

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);   } } 
like image 181
Joe Clay Avatar answered Sep 23 '22 00:09

Joe Clay