在 react-native 中用 createStructuredSelector 替换 useSelector

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 returns 一个选择器（一个接受 state 和 returns 一个对象 {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 中用 createStructuredSelector 替换 useSelector

Replace useSelector with createStructuredSelector in react-native

reactjs

react-native

redux

reselect