将 Reselect 与 ownProps 一起使用以获得最佳实践？答案

【问题标题】：Use Reselect with ownProps for best practice?将 Reselect 与 ownProps 一起使用以获得最佳实践？
【发布时间】：2021-02-24 07:47:14
【问题描述】：

我想从我的 redux 状态中选择流信息。这是可行的，但是当我尝试从我的 redux 状态中选择深度状态时，我感到非常困惑。我想从ownProps 中选择（state.livestream.subscribeLiveStream[postID].des，state.livestream.subscribeLiveStream[postID].views，...）和postID。这是我的代码。我的问题

选择器和组件中的代码好吗？
如果不是，请解释原因。

感谢您的帮助。这是我所拥有的

减速器

state = {
  livestream: {
    subscribeLiveStream: {
      'a': {
        des: 'My stream a',
        views: 0,
        status: 0,
      },
      'b': {
        des: 'My stream b',
        views: 0,
        status: 0,
      }
      // 'a', 'b' is ID
    }
  },
  // other
}

选择器

const livestreamSelector = state => state.livestream;

/* select subscribeLiveStream */
export const selectSubLiveStream = createSelector(
  livestreamSelector,
  livestream => livestream.subscribeLiveStream
);

/* select subscribeLiveStream info */
const getPostID = (_, postID) => postID;
export const makeSelectSubLiveStreamViews = () => createSelector(
  [selectSubLiveStream, getPostID],
  (subLiveStream, postID) => subLiveStream[postID]?.views || 0
);

在组件中使用：

const LiveStream = ({ postID }) => {
  const selectSubLiveStreamViews = useMemo(makeSelectSubLiveStreamViews, []);
  const views = useSelector(state =>
    selectSubLiveStreamViews(state, postID)
  );
  return (
    <div>
      <p>My stream views: {views}</p>
    </div>
  );
};

【问题讨论】：

代码对我来说似乎很好。你说它有效。这里有什么问题？

标签： reactjs redux react-redux reselect

【解决方案1】：

您可以将参数 postID 作为第一个参数传递：

//pass in postId and return a selector function
export const makeSelectSubLiveStreamViews = (postId) => createSelector(
  [selectSubLiveStream],
  (subLiveStream) => subLiveStream[postID]?.views || 0
);

在您的组件中：

//you need to recreate the selector function when postId chages
//  or you'll get the wrong data
const selectSubLiveStreamViews = useMemo(
  ()=>makeSelectSubLiveStreamViews(postId), [postId]
);
//no need to pass postId again, code looks a little cleaner
const views = useSelector(selectSubLiveStreamViews);

Here 是我如何在 React-redux 中使用 reselect 的一些示例。

【讨论】：

感谢您的帮助，很好，但是我有一个问题，我想保留文件选择器，当我在组件中使用时，我写：const selectSubLiveStreamViews = useMemo(() => makeSelectSubLiveStreamViews,[postId]); const views = useSelector(state => selectSubLiveStreamViews(state, postID));这是错误的或与您的评论相似？？？谢谢你。因为makeSelectSubLiveStreamViews改变时postId改变
@PhátNguyễn 我猜你的代码或多或少是一样的，但既然你使用备忘录，你可以先传递 postId。您问题中代码的主要问题是 useMemo 中缺少 postId 依赖项。我只是喜欢我使用更好的语法。