Should I use Redux store.subscribe() or wrap my app with react-redux <Provider>?

Question

I have seen the two approaches : in this example, which is taken from a course by Dan Abramov, he is using this approach :

const render = () => {
  ReactDOM.render(
    <Counter
      value={store.getState()}
      onIncrement={() =>
        store.dispatch({
          type: 'INCREMENT'           
        })            
      }
      onDecrement={() =>
        store.dispatch({
          type: 'DECREMENT'           
        })            
      }
    />,
    document.getElementById('root')
  );
};

store.subscribe(render);

The store.subscribe() function in Redux allows to add listeners that get called when an action is dispatch.

in this other example, which is an example from Redux documentation :

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

the store.subscribe is not used, but instead they wrap the entire App inside a <Provider> component.

What’s the difference between the two approaches ? It seems they are doing the same thing, which is to make sure the App has the last version of the state.

Can/Should I use Store.subscribe if i have wrapped my app with a <Provider> ?

Answer 1

You can use the first method maybe but then you should pass the store every other component in the future. Doing this manually is a lot of work, but other than that it makes things hard, like testing, etc.

Provider is not a part of Redux but comes with react-redux to make the things easier. You wrap your component with it and it passes the store all the way down. react-redux also provides the connect function. You use it in the components wherever you want to reach your action dispatchers and your state.

So, you can easily see that using the Provider component is almost a de facto standard. So, probably you want to use it and do not bother with manually doing store.subscribe and passing your store to other components. So, if you use Provider you won't use store.subscribe.

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

Then, in another component where you want to use the goodies of redux:

const Component = ...

const mapStateToProps = (state) => ({
    value: state.someValueFromState
});

const mapDispatchToProps = { action, otherAction };

export default connect(
  mapStateToProps,
  mapDispatchToProps
  // or you can use action creators directly instead of mapDispatchToProps
  // { action, otherAction }
)(Component);

Then, you can use your action creators and state values as props in the Component.

Answer 2

The <Provider> component is specific to the official React-Redux binders. So if your'e using React-Redux (and not only Redux) use <Provider>. The <Provider> component will make sure that everything that's wrapped in it will have access to the store.