redux-hooks.js

function MyComponent ({spaceId}) {
  const [space, loading, error] = useSpace(spaceId);

  if (loading) return <Loading />
  if (error) return <Error />
  return <SpaceCard space={space} />
}

function useSpace (spaceId) {
  const dispatch = useDispatch();
  const {space, spaceLoading, spaceError} = useSelector((state) => ({
    space: state.entities.spaces[spaceId],
    spaceLoading: state.entities.meta.space[spaceId].isLoading,
    spaceError: state.entities.meta.space[spaceId].error
  }));

  useEffect(() => {
    if (!space) {
      dispatch(getSpace(spaceId))
    }
  }, [spaceId]);

  return [space, spaceLoading, spaceError]
}

vanilla-redux.js

const selector = (state, props) => ({
  space: state.entities.spaces[props.spaceId],
  spaceLoading: state.entities.meta.space[props.spaceId].isLoading,
  spaceError: state.entities.meta.space[props.spaceId].error
})

class MyComponent extends React.Component {
  compeontDidMounts() {
    this.props.dispatch(getSpace(this.props.spaceId))
  }
  render() {
    if (this.props.spaceLoading) return <Loading />
    if (this.props.spaceError) return <Failure />
    return <SpaceCard space={this.props.space} />
  }
}

export default connect(selector)(MyComponent)