时间戳

首页 > 解决方案 > 在 react-native 中用 createStructuredSelector 替换 useSelector

reactjs - 在 react-native 中用 createStructuredSelector 替换 useSelector

问题描述

我在我的 react-native 项目中使用了 reselect 库。我有以下代码。

import { createSelector } from 'reselect';

import { ApplicationState } from 'types/reducer.types';

const selectAuth = ({ auth }: ApplicationState) => auth;

export const selectFirstName = createSelector([selectAuth], auth => auth.user?.firstName);

export const selectLastName = createSelector([selectAuth], auth => auth?.user?.lastName);

在容器中代码是这样的。

import { connect } from 'react-redux';
// import { useSelector } from 'react-redux';
import { createStructuredSelector } from 'reselect';

import { signOut } from 'Redux/auth/auth.actions';
import { selectFirstName, selectLastName } from 'Redux/auth/auth.selectors';
import CustomDrawer from './custom-drawer.component';

const mapStateToProps = createStructuredSelector({
  firstName: selectFirstName,
  lastName: selectLastName,
});

export default connect(mapStateToProps, { signOut })(CustomDrawer);

现在我想使用 useSelector 钩子。我尝试了几种方法，但没有奏效。如何才能做到这一点？

标签： reactjsreact-nativereduxreselect

解决方案

createStructuredSelector返回一个选择器（一个接受state并返回一个对象的函数{firstName, lastName}），所以你可以在里面使用它useSelector

const {firstName, lastName} = useSelector(createStructuredSelector({
  firstName: selectFirstName,
  lastName: selectLastName,
}));

或使用您现有的变量

const {firstName, lastName} = useSelector(mapStateToProps);

useSelector但是，当您可以在一个组件中使用多个挂钩时，组合然后破坏属性实际上没有任何意义。

const firstName = useSelector(selectFirstName);

const lastName = useSelector(selectLastName);

推荐阅读