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, ponent 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.
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, ponent 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.
Share Improve this question edited Jan 31, 2022 at 8:22 VLAZ 29.1k9 gold badges62 silver badges84 bronze badges asked Aug 29, 2018 at 9:57 Quoc Van TangQuoc Van Tang 1,1935 gold badges17 silver badges37 bronze badges 5- 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 ponents and pass to child ponents using Provider. – Henok Tesfaye Commented Aug 29, 2018 at 10:42
- @HenokTesfaye, thanks for your answer, but how about we create a store in the separated file and export them, then every ponent if want to use getState or dispatch will easily import the store and use it. – Quoc Van Tang Commented Aug 29, 2018 at 10:47
- 1 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 Commented Aug 29, 2018 at 10:54
- 1 @HenokTesfaye, yes, I got it. thank you – Quoc Van Tang Commented Aug 29, 2018 at 10:59
- You're Wele. – Henok Tesfaye Commented Aug 29, 2018 at 11:03
1 Answer
Reset to default 13mapStateToProps 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 ponent. 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 ponent.
- Access redux store directly if you don't need to map with ponent.
Further, this blog will explain a bit more: react redux connect explained
Redux Flow:
Using connect with react ponent:
To conclude: Using connect, you use the provider and it lets the every child ponent to access the store by providing a provider and using store props in root app ponent.