在react-native中将useSelector替换为createStructuredSelector

问题描述

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

解决方法

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

,

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。