store.getState or mapStateToProps in Component

Question

I have a question that what is the difference between use getState from store directly or use mapStateToProps. Please look at me example below

import React, { Component } from 'react'
import store from '../store'
import { connect } from 'react-redux';

class Test extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <p>
        <h1>{this.props.count}</h1>
        <h2>{store.getState().reducer1.count}</h2>
      </p>
    )
  }
}

const mapStateToProps = (state) => ({
  count: state.reducer1.count
});

// export default Test;
export default connect(mapStateToProps)(Test);

Both store.getState and mapStateToProps above work normally, it still updates when state change. If we just use getState only, we don't need to use connect method.

Another point I've recognized is when use mapStateToProps with connect, in reducer we must return a new copy of object state than return that state with modification. If not, component will not update when state changed. Like this:

return Object.assign({}, state, {
        count: state.count + 1,
        payload: action.payload,
      });

But if we use store.getState(), we can either return a new copy or the revised one. Like this:

state.count++;
state.payload = action.payload;
return state

Anyone know please explain to me, thank you.

P/S: and similar with store.dispatch vs mapDispatchToProps, those 2 will work normally, just want to know why we should use mapToProps with connect instead of call the function directly from the store.

The basic difference is that mapStateToProps gets store reference from the Context and passes state object as the first argument to mapStateToProps function. So we can create store object from the upper components and pass to child components using Provider. — Henok Tesfaye
@HenokTesfaye, thanks for your answer, but how about we create a store in the separated file and export them, then every component if want to use getState or dispatch will easily import the store and use it. — Quoc Van Tang
Yes you can @Quoc Van Tang. But I think main difference is 1,security(you only access the state not the store in mapStateToProps) 2, separation of concern. It is better to write state manipulation code inside mapStateToProps. — Henok Tesfaye

Bhojendra Rauniyar Bhojendra Rauniyar · Accepted Answer · 2018-08-29T10:16:13

mapStateToProps is just a helper function which is really helpful to manage the project in modular style. For example, you can even place all the logic of connect in separate files and use where you want.

Suppose if you're working on a large scale application, then guess a sorts of properties nested there. Using connect you're actually modularizing project which is very helpful for developers who watch the project.

If you don't, you're writing several lines of code in single file.

A possible problem you'll face when using getState() or dispatch() directly. See this post for a little help to make it clear.

The key benefit using connect is that you don't need to worry about when state is changed using store.subscribe(), the connect will let you know each state change whenever it gets updates.

Also, react core concept is based on props and states. Using connect allows you to get redux state as props. Using this.props :)

And ah, I remembered at what condition I accessed the store directly rather than using connect. In my project, I needed to save all the redux state in different form to somewhere and I din't need to connect it to any component. In this case, direct usage with redux store is very easy and helpful. But if we try the same with connect in this case, then we'll have a difficult time.

Thus, I would suggest you to use them in separate condition.

Use connect if you want to map with component.
Access redux store directly if you don't need to map with component.

Further, this blog will explain a bit more: react redux connect explained

Redux Flow:

Using connect with react component:

To conclude: Using connect, you use the provider and it lets the every child component to access the store by providing a provider and using store props in root app component.

store.getState or mapStateToProps in Component

1 Answers