Redux reducer - a single state object or multiple states? - reactjs

Question

Consider these two patterns for reducer's state:
A single state object:
// personReducer.js
const initialState = {
personInfo: {
firstName: "",
lastName: "",
foo: "",
bar: "",
baz: "",
foo1: "",
bar1: "",
bar2: "",
foo2: "",
foo3: "",
}
// some not-to-mention states
};
Multiple states (without the person level):
// personReducer.js
const initialState = {
firstName: "", // no person level
lastName: "",
foo: "",
bar: "",
baz: "",
foo1: "",
bar1: "",
bar2: "",
foo2: "",
foo3: ""
};
Which one is better? What confuses me is:
// Person.jsx - pattern 1
const mapStateToProps = ({ personInfo }) => {
personInfo
}
// Person.jsx - pattern 2
const mapStateToProps = ({ firstName, lastName }) => {
firstName,
lastName
}
// Human.jsx - pattern 1
const mapStateToProps = ({ personInfo }) => {
personInfo
}
// Human.jsx - pattern 2
const mapStateToProps = ({ foo, bar }) => {
foo,
bar
}
Let's say we have 2 components Person and Human in our app, both of them will connect to personReducer to retrieve personal information.
For pattern 1:
In Person component, I dispatch an action to update firstName inside personInfo, which later will force Human to re-render as well, does it? Something like this in our reducer:
case UPDATE_PERSON_INFO: {
return {
...state,
personInfo: {
...state.personInfo,
firstName: payload.firstName
}
}
}
For pattern 2:
In Person component, I dispatch an action to update firstName, which later will not force Human to re-render, because Human is not mapping firstName to its props, but foo, bar. Am I right? Something
like:
case UPDATE_PERSON_INFO: {
return {
...state,
firstName: payload.firstName
}
}

Answer 1

It will re-render in both cases because in both patterns you update the reference to the new immutable state object.
If you want to prevent unnecessary renderings of components you have to use memoized selectors in mapStateToProps. Here is the documentation link and GitHub
These, selectors should be specific for your components.