Redux provides a useSelector hook for easy access to state within a function component. This hook replaces the mapStateToProps
function which was used previously with connect()
. The hooks API is a lot simpler and can be combined nicely with selector functions.
The basic API looks like this:
const value = useSelector(state => state.reducerName.value)
When used with a selector function it looks like this:
const value = useSelector(getValue)
This seems like it would complicate testing a component vs the older pattern of a separate mapStateToProps(). When you remove props from a component and rely on global hooks, you have more work to do when mocking those usages.