The naive way to do it on one line would be to write a function that grabs the parts of state you care about, and constructs an object with those properties:
const { user, other } = useSelector((state) => {
return { user: state.userReducer, other: state.otherReducer };
});
However, this will immediately cause a performance problem. Every time the selector runs, it creates a brand new object. And even if user and other havn't changed, the outer object has changed, so your component is forced to rerender. In other words, your component will rerender every time any action is dispatched anywhere in the app.
To fix this, useSelector allows you to provide an additional function which defines whether two values are equal or not. You can then implement a function to check if the stuff you care about has changed:
const { user, other } = useSelector((state) => {
return { user: state.userReducer, other: state.otherReducer };
}, (a, b) => {
return a.user === b.user && a.other === b.other
});
react-redux comes with a shallow comparison function which may be useful for this purpose if you prefer:
import { useSelector, shallowEqual } from 'react-redux';
// ...
const { user, other } = useSelector((state) => {
return { user: state.userReducer, other: state.otherReducer };
}, shallowEqual);