Question

我在我的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挂钩。我尝试了几种方法，但是没有用。该怎么办？

Answer 1

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);

Answer 2

useSelector和useDispatch是两个可以从react-redux包中导入的钩子，这两个钩子可以轻松替代使用connect的需要。

这是您如何使用它们：

import { useDispatch, useSelector } from 'react-redux';
import {someAction} from '../user/userActions';

const YourComponent = () => {
 // useDispatch returns back a dispatch function
 const dispatch = useDispatch();
 // useSelector selects a portion of the state, it plays the role and 
// replace the need for mapStateToProps in connect higher order function
 const currentUser = useSelector(state => state.user.currentUser);

 return(
   <>
      <h1>{ currentUser.firstName }</h1>
      // Here you can use dispatch to dispatch an action
      <button onClick={() => dispatch(someAction)}></button>
   </>
 )
};

export default YourComponent;

总体上，您可以看到，通过使用useSelector和useDispatch，我们从代码中删除了很多样板代码（connect，mapStateToProps，mapDispatchToProps，createStructuredSelector删除），它看起来干净，可读性强且仍然像以前一样。

这是官方资源，您可以阅读更多有关上述两个钩子的信息。 React-Redux Hooks

P.S。您还可以将使用reselect创建的选择器或您选择的任何选择器发送到useSelector。

在react-native中将useSelector替换为createStructuredSelector

2 个答案: