Question

在 react-native 中用 createStructuredSelector 替换 useSelector

2020-11-05

1750

reactjs react-native redux reselect

我在我的 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

附注：您还可以将使用 reselect 创建的选择器或您选择的任何选择器发送到 useSelector 。