如何将高阶组件连接到 Redux 存储？

Question

基本上，我有一个 AuthenticationHOC，它必须获取 redux 状态，检查令牌是否存在，如果存在，则呈现包装的组件。如果没有，则分派一个操作来尝试从 localStorage 加载令牌。如果失败，重定向到登录页面。

import React from 'react';
import { connect } from 'react-redux';
import * as UserActions from '../../state/actions/user-actions';
import * as DashboardActions from '../../state/actions/dashboard-actions';

const mapStateToProps = state => {
  return {
    token: state.user.token,
    tried: state.user.triedLoadFromStorage,
  };
};

const _AuthenticationHOC = Component => props => {
  // if user is not logged and we 've not checked the localStorage
  if (!props.token && !props.tried) {
    // try load the data from local storage
      props.dispatch(DashboardActions.getDashboardFromStorage());
      props.dispatch(UserActions.getUserFromStorage());
  } else {
    // if the user has not token or we tried to load from localStorage 
    //without luck, then redirect to /login
    props.history.push('/login');
  }

  // if the user has token render the component
  return <Component />;
};

const AuthenticationHOC = connect(mapStateToProps)(_AuthenticationHOC);
export default AuthenticationHOC;

然后我试着像这样使用它

const SomeComponent = AuthenticationHOC(connect(mapStateToProps)(HomeComponent));

但我总是在标记上面那行时出错。

TypeError: Object(...) is not a function

然后我做了一个简化版

我将 HOC 中的代码替换为最简单的版本

const _AuthenticationHOC = Component => props => {
  return <Component {...props}/>;
};

这也不管用。然后我从我的 HOC 中删除了 connect 函数，只导出这个组件和 tada！ ...现在可以使用了！

所以我怀疑connect returns一个不能作为HoC函数使用的对象。这个对吗？我可以在这里做什么？

Answer 1

如您的第一次尝试所述： const SomeComponent = AuthenticationHOC(connect(mapStateToProps)(HomeComponent))

根据定义，这意味着将参数作为纯组件传递给 AuthenticationHOC 将 return 另一个组件。但是在这里你传递了另一个 HOC 即 connect() 它不是一个组件而是一个包装器。因此根据定义，解析为 return <connect(mapStateToProps) /> 的 return <Component /> 将产生语法错误或运行时错误。

传递纯组件作为一些 HomeComponent 将起作用，因为它只是一个组件。

我的猜测是，connect() 在幕后确实 currying. What it does is returns a component wrapper with its mapStateToProps and mapDispatchToProps as additional props injected in. Source - https://react-redux.js.org/api/connect#connect-returns

Answer 2

如connect()所述：

The return of connect() is a wrapper function that takes your component and returns a wrapper component with the additional props it injects.

因此，我们可以将序列反转为：

const AuthenticationHOC = _AuthenticationHOC(HomeComponent);
export default connect(mapStateToProps)(AuthenticationHOC);

并确保在您的 HOC

中传递 props

const _AuthenticationHOC = Component => props => {
  return <Component {...props} />; // pass props
};

Answer 3

请参阅此答案的底部以阅读对问题内容的直接回复。我将从我们在日常开发中使用的良好实践开始。

正在连接 Higher-Order Component

Redux 提供了一个有用的 compose utility function.

All compose does is let you write deeply nested function transformations without the rightward drift of the code.

所以在这里，我们可以用它来嵌套 HoC，但要以一种可读的方式。

// Returns a new HoC (function taking a component as a parameter)
export default compose(
  // Parent HoC feeds the Auth HoC
  connect(({ user: { token, triedLoadFromStorage: tried } }) => ({
    token,
    tried
  })),

  // Your own HoC
  AuthenticationHOC
);

这类似于手动创建一个新的容器 HoC 函数。

const mapState = ({ user: { token, triedLoadFromStorage: tried } }) => ({
    token,
    tried
});

const withAuth = (WrappedComponent) => connect(mapState)(
  AuthenticationHOC(WrappedComponent)
);

export default withAuth;

然后，你就可以透明的使用你的auth HoC了。

import withAuth from '../AuthenticationHOC';
// ...
export default withAuth(ComponentNeedingAuth);

编写一个干净且可测试的 HoC

为了将 auth 组件与存储和路由隔离，我们可以将其拆分为多个文件，每个文件都有自己的职责。

- withAuth/
  - index.js           // Wiring and exporting (container component)
  - withAuth.jsx       // Defining the presentational logic
  - withAuth.test.jsx  // Testing the logic

我们让 withAuth.jsx 文件专注于呈现和逻辑，无论它来自何处。

// withAuth/withAuth.jsx
import React from 'react';

const withAuth = (WrappedComponent) => ({
  // Destructure props here, which filters them at the same time.
  tried,
  token,
  getDashboardFromStorage, 
  getUserFromStorage, 
  onUnauthenticated, 
  ...props
}) => {
  // if user is not logged and we 've not checked the localStorage
  if (!token && !tried) {
    // try load the data from local storage
    getDashboardFromStorage();
    getUserFromStorage();
  } else {
    // if the user has no token or we tried to load from localStorage
    onUnauthenticated();
  }

  // if the user has token render the component PASSING DOWN the props.
  return <WrappedComponent {...props} />;
};

export default withAuth;

看到了吗？我们的 HoC 现在不知道存储和路由逻辑。我们可以将重定向移动到商店中间件或其他任何地方，如果商店不是您想要的地方，它甚至可以在道具 <Component onUnauthenticated={() => console.log('No token!')} /> 中自定义。

然后，我们只提供index.js中的props，就像一个容器组件。¹

// withAuth/index.js
import React from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { getDashboardFromStorage, onUnauthenticated } from '../actions/user-actions';
import { getUserFromStorage } from '../actions/dashboard-actions';
import withAuth from './withAuth';

export default compose(
  connect(({ user: { token, triedLoadFromStorage: tried } }) => ({
    token,
    tried
  }), {
    // provide only needed actions, then no `dispatch` prop is passed down.
    getDashboardFromStorage,
    getUserFromStorage,
    // create a new action for the user so that your reducers can react to
    // not being authenticated
    onUnauthenticated,
  }),

  withAuth
);

onUnauthenticated 作为存储操作的好处在于，不同的 reducer 现在可以对其做出反应，例如擦除用户数据、重置仪表板数据等。

测试 HoC

然后，可以用 Jest and enzyme.

之类的东西来测试 withAuth HoC 的隔离逻辑

// withAuth/withAuth.test.jsx
import React from 'react';
import { mount } from 'enzyme';
import withAuth from './withAuth';

describe('withAuth HoC', () => {
  let WrappedComponent;
  let onUnauthenticated;

  beforeEach(() => {
    WrappedComponent = jest.fn(() => null).mockName('WrappedComponent');
    // mock the different functions to check if they were called or not.
    onUnauthenticated = jest.fn().mockName('onUnauthenticated');
  });

  it('should call onUnauthenticated if blah blah', async () => {
    const Component = withAuth(WrappedComponent);
    await mount(
      <Component 
        passThroughProp
        onUnauthenticated={onUnauthenticated} 
        token={false}
        tried
      />
    );

    expect(onUnauthenticated).toHaveBeenCalled();

    // Make sure props on to the wrapped component are passed down
    // to the original component, and that it is not polluted by the
    // auth HoC's store props.
    expect(WrappedComponent).toHaveBeenLastCalledWith({
      passThroughProp: true
    }, {});
  });
});

为不同的逻辑路径添加更多测试。

关于你的情况

So I suspect that connect returns an object that can't be used as a HoC function.

react-redux 的 connect returns an HoC.

import { login, logout } from './actionCreators'

const mapState = state => state.user
const mapDispatch = { login, logout }

// first call: returns a hoc that you can use to wrap any component
const connectUser = connect(
  mapState,
  mapDispatch
)

// second call: returns the wrapper component with mergedProps
// you may use the hoc to enable different components to get the same behavior
const ConnectedUserLogin = connectUser(Login)
const ConnectedUserProfile = connectUser(Profile)

In most cases, the wrapper function will be called right away, without being saved in a temporary variable:

export default connect(mapState, mapDispatch)(Login)

then I tried to use this like this
AuthenticationHOC(connect(mapStateToProps)(HomeComponent))

虽然连接 HoC 的顺序颠倒了，但您已经接近了。应该是：

connect(mapStateToProps)(AuthenticationHOC(HomeComponent))

这样，AuthenticationHOC 从商店接收道具，HomeComponent 被正确的 HoC 正确包装，这将 return 一个新的有效组件。

也就是说，我们可以做很多事情来改进这个 HoC！

^{1.如果您不确定是否将 index.js 文件用于容器组件，您可以根据需要重构它，比如 withAuthContainer.jsx 文件，它可以在索引中导出，也可以让开发人员选择他们需要的文件。}

如何将高阶组件连接到 Redux 存储？

How to connect a Higher-Order Component to a Redux store?

javascript

reactjs

redux

react-redux

higher-order-components

正在连接 Higher-Order Component

编写一个干净且可测试的 HoC

测试 HoC

关于你的情况